黑马程序员-JS基础-事件高级

目录

事件注册

事件解绑

事件对象

事件捕获与事件冒泡

事件委托

---

事件注册

方式	说明	语法
传统	只能绑定一个事件，后者会覆盖前者；	eventTarget.onclick=function(){};
监听注册	可以绑定多个事件，按先后顺序执行	eventTarget.addEventListener(‘click’，function（{}）,[默认false])
		eventTarget.attachEvent(‘onclick’，function（{}）)  （IE8及早期版本支持）

 btns[0].onclick = function() {

            alert('1');

        }

btns[0].onclick = function() {

                alert(‘2');

            }

*只会弹出2，因为传统方式只能绑定一个事件，旧的会被覆盖；

 btns[1].addEventListener('click', function() {

            alert(22);

        })     

btns[1].addEventListener('click', function() {

                alert(33);

            })

*会先后弹出22和33，因为监听事件可以绑定多个事件，按照先后顺序执行

事件解绑

方式	语法
传统	eventTarget.onclick = null;
监听注册	eventTarget.removeEventListener('click', fn);
	eventTarget.detachEvent(‘onclick’，fn) ；

事件对象

 div.addEventListener('click', function(e) {
         console.log(e);}

//后台打印的是一个以对象形式存储的数据，包含了与事件相关的属性和功能，如鼠标位置、键盘信息等，有时候，我们可以根据需要修改事件对象的属性和功能；

1. 这个事件对象我们可以自己命名 比如 event 、 evt、 e

2. 事件发生后，事件对象是系统给自动创建的，不需要我们传递参数

• 事件对象的常用属性和方法

	事件对象的属性与方法
返回触发事件的对象 （该对象不一定要绑定事件）	e.target                        (标准)
	e.srcElement            （ie6~8）
返回事件类型	e.type
阻止默认事件，如跳转链接	e.preventDefault()
	e.returnValue              （ie6~8）
阻止冒泡	e.stopPropagation()
	e.cancelBubble = true（ie6~8）

• 鼠标事件对象的常用属性和方法

鼠标事件对象	返回值
e.clientX	鼠标相对于浏览器窗口可视区的X坐标
e.clientY	鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	鼠标相对于文档页面的X坐标
e.pageY	鼠标相对于文档页面的X坐标
e.screenX	鼠标相对于电脑屏幕的X坐标
e.screenX	鼠标相对于电脑屏幕的X坐标

• 键盘事件对象的常用属性和方法

keyCode：返回按键的SACII值

事件捕获与事件冒泡

事件捕获	说明	从最顶层的DOM节点开始往下传播到具体元素的过程；
事件冒泡	说明	由最初的元素（不一定要绑定事件）逐级往上传播DOM最顶层节点的过程
	会冒泡的情况	onclick、attachEvent只能得到冒泡阶段 addEventListener的第三个参数为默认false时
	不会冒泡的情况	onblur、onfocus、onmouseover

事件委托

 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点，不用给每个子节点单独绑定事件；

 <ul>

        <li>知否知否，点我应有弹框在手！</li>

        <li>知否知否，点我应有弹框在手！</li>

        <li>知否知否，点我应有弹框在手！</li>

        <li>知否知否，点我应有弹框在手！</li>

    </ul>

    <script>

        var ul = document.querySelector('ul');

        ul.addEventListener('click', function(e) {

            e.target.style.backgroundColor = 'pink';

        })