好悲催,阴世界的事件对象跑到光世界时,它的属性都被重写了,要自己做备份。

      <div id="root">Hello, world!</div>
<script>
var host = document.querySelector('#root');
document.onclick = function(e){
console.log(e._target)
}
var root = host.webkitCreateShadowRoot();
root.addEventListener("click", function(e){
e._target = e.target
})
var p = document.createElement('p');
p.innerHTML = "这是影世界"
root.appendChild(p)
</script>

Shadow DOM的事件绑定的更多相关文章

  1. DOM常用事件绑定方式与实例

    一.常用的事件 onclick 点击事件 模态框实例 <input type="button" id="b1" style="width:50p ...

  2. DOM中事件绑定补充方法

    先将上一篇文章中提到的为元素增加事件的方法和移除事件的方法拿过来: <span style="font-size:18px;">//跨浏览器添加事件 function ...

  3. 5事件DOM零级事件跟DOM二级事件

    事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...

  4. ES之事件绑定,解除绑定以及事件冒泡、事件捕获

    绑定事件的处理方法任何元素都有事件属性,而绑定事件就是将这个事件与一个函数相连接. ①句柄事件dom.onXXX = function () {代码块} 以on开头的事件属于句柄事件兼容性非常好,但是 ...

  5. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  6. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  7. 从一个事件绑定说起 - DOM

    事件绑定的方式 给 DOM 元素绑定事件分为两大类:在 html 中直接绑定 和 在 JavaScript 中绑定. Bind in HTML 在 HTML 中绑定事件叫做内联绑定事件,HTML 的元 ...

  8. dom元素操作(动态事件绑定)

    遇到的问题:动态生成的内容,事件绑定会出错. 例子:http://snowinmay.net/jqm/dom-learn2.html 1.绑定事件对动态生成的新元素无效. 问题描述:bind事件绑定后 ...

  9. 2014年辛星解读Javascript之DOM之事件及其绑定

    我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...

随机推荐

  1. springboot项目执行controller方法时进入慢的问题

    今天在部署springboot项目到阿里云时,出现登录方法执行特别慢的问题.刚开始以为是卡死了,等了3,4分钟才进去,最后会出现如下信息: 2018-01-28 15:38:36.958 INFO 4 ...

  2. L127

    Biggest Studies on Aspirin Show Risks Outweigh Benefits for Many People Doctors have long recommende ...

  3. (六)js常见四大排序

    今天突然想回顾一下四大排序,虽然说在实战中没有用到,但是想回顾一下四大排序的思想   var arr = [23, 34, 11, 22, 19, 18];   1.冒泡排序: 冒泡排序的思路分析: ...

  4. MySql必知必会实战练习(五)存储过程

    1. 为什么使用存储过程? (1) 通过把处理封装在容易使用的单元中,简化复杂操作 (2) 为了保证数据的完整性,不要求反复建立一系列的处理操作,所有开发人员和应用程序都使用同一(试验和测试)存储过程 ...

  5. 在Git远程管理项目

    新建repository 本地目录下,在命令行里新建一个代码仓库(repository) 里面只有一个README.md 命令如下: touch README.md        git init 初 ...

  6. excel oracle字段命名(大写下划线分词)转 驼峰命名

    干货: (帕斯卡) =LEFT(C251,1)&MID(SUBSTITUTE(PROPER(C251),"_",""),2,100) (驼峰) =LOW ...

  7. C#如何动态设置屏幕分辨率

    C#如何动态设置屏幕分辨率 作者:Learning hard 这篇文章主要为大家详细介绍了C#动态设置屏幕分辨率的方法,我们可以使用Screen类设置屏幕分辨率,感兴趣的小伙伴们可以参考一下 下面就不 ...

  8. Oracle cursor_sharing 参数 详解

    一. 官网的说明 http://download.oracle.com/docs/cd/E11882_01/server.112/e17110/initparams042.htm#REFRN10025 ...

  9. (装)Android杂谈--禁止TimePicker控件通过keyboard输入

    Android 4.1版本以上用的是类似与ios的滚动时间控件,但是4.1以下,用的TimePicker确实通过点击上下按钮来更改时间的,虽然也提供了编辑框编辑,但是可能会超出编辑范围 如果要禁止编辑 ...

  10. Ubuntu 下使用 mutt 和 msmtp 发送 Gmail 邮件

    参考:        http://www.cnblogs.com/refrag/archive/2012/11/28/2793533.html         http://www.habadog. ...