DOM事件

1.基本概念:DOM事件的级别
DOM0 element.onclick = function(){}

在js中:添加事件监听对象的形式
element.addEventListener("事件名", function(){})

DOM2 element.addEventListener('click', function(){}, false) //removeEventListener()
DOM3 element.addEventListener('keyup', function(){}, false) 事件类型增加了
1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型

2.DOM事件模型:事件发生的各个阶段
捕获(上到下) 冒泡(当前元素向上)

3.DOM事件流:浏览器在为当前页面
三个阶段:
捕获(true),依次记录各级父元素上绑定的处理函数
目标阶段(到达目标元素),
冒泡(false),依次触发各级父元素上的事件处理函数

4.描述DOM事件捕获的具体流程
捕获流程:window -> document -> html -> body ->一层一层 ->目标元素

5.Event对象的常见应用
event.preventDefault() 阻止默认行为
event.stopPropagation() 阻止冒泡(父子)
event.stopImmediatePropagation() 事件响应优先级(多个按钮)
event.currentTarget 当前绑定的事件
event.target 当前被点击的元素

6.自定义事件
var eve = new Event('test');
ev.addEventListener('test', function(){
console.log('test dispatch');
});
setTimeout(function(){
ev.dispatchEvent(eve);
}, 1000);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、dom对象的innerText和innerHTML有什么区别? innerHTML返回的是从对象起始位置到终止...
    __Qiao阅读 3,097评论 0 0
  • DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM 0 级事件是基于元素内联属性或DOM元素命名的...
    邢烽朔阅读 2,682评论 0 0
  • dom对象的innerText和innerHTML有什么区别? innerHTML指的是从对象的起始位置到终止位置...
    coolheadedY阅读 3,379评论 0 0
  • 1、dom对象的innerText和innerHTML有什么区别? innerText是输出/更改纯文本; inn...
    Iswine阅读 2,675评论 0 0
  • #幸福是需要修出来的~每天进步1%~幸福实修08班~11贾春芬-杭州#20170824(67/99) 【幸福三朵玫...
    chfenj阅读 949评论 0 1