怎么出题:
1、不会直接问几个级别,但是会,请问用DOM2如何如何。基本概念的认知。
2、你了解DOM事件模型吗?DOM事件模型是什么?(捕获冒泡)
3、DOM事件流
4、捕获的具体流程。要一个环节不落。
5、Event,a事件原理的掌握,捕获冒泡流程,b注册事件,c响应的时候
6、最后一个进阶题目。
1、DOM级别:
0级写法,在一个元素上,js写法如上:onclick上等于function,如果html上,就是一个onclick属性上加一个js语句。DOM0级后定义的事件会覆盖之前的,但是DOM2,3级一个元素上可以绑定多个事件。
2级增加了上面代码中写的,后面的false指定了冒泡还是捕获。DOM1标准有,但是没有关于事件的。IE上,attachEvent。
3级事件类型增加了很多,比如鼠标,键盘事件。
2、DOM事件模型:
3、事件流(浏览器在为当前页面与用户做交互的过程中,比如点击鼠标左键,这个左键怎么传递到页面上。)
完整事件流三阶段:第一阶段捕获,第二阶段目标阶段,事件通过捕获到目标元素。第三阶段,目标元素再上传widow对象,就是冒泡过程。
4、描述DOM事件捕获的具体流程
第一个接受事件的对象,第一个接受的对象window然后给document。
body可以通过document.body可以拿到,但是html是不是可以通过document.html能拿到呢?不是的。怎么用js表达html节点。document.body是DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的引用。
冒泡的流程,相反。
5、Event对象
我想拿到用户到底是敲的哪个键,敲得哪个键盘值,都是从event拿过来的。上面五个内容,很容易错的。
1、阻止默认事件,比如a标签,阻止链接跳转。
2、阻止冒泡行为。不需要冒泡时候,比如父元素,子元素各绑定一个事件,如果只想要点击父级一个事件,点击子元素一个事件,那么就要阻止冒泡了。
3、比如一个按钮绑定两个click事件a,b,优先级的方式,在a点击的时候,不再点击b。正常在一个按钮绑定两个事件,触发按钮时候,两个事件都会发生。如果a的响应函数中添加这么一句话的话,就可以成功阻止b的触发。事件响应优先级。
4、5经常考察的知识点,不会直接问你两个的含义,但是会出题目,比如事件委托。一个for循环给一个dom注册n多事件,怎么优化?就是让你用事件代理。子元素的事件都代理到父元素,绑定一次事件就可以了。响应的时候,就要区分当前是哪个元素被点击。这个就是event.target上场的时候,就是表示被点击的元素。currentTarget表示当前被绑定的事件的这个对象,也就是那个父级元素。
用法场景:比如一个按钮,不是一个常规click事件,想给他增加一个事件,别的地方触发这个事件。而不是用回调的方式去处理。就用自定义事件。用法如上。自定义事件,自定义触发事件。
Event只能定义数据名,不能添加数据。customEvent还可以自定义参数。