注意:Chrome 中打印的对象展开的时候显示的是当前对象的值,可能已经不是打印的时候的值了,所以需要通过在打印的地方打断点的形式来查看准确的值。或者直接通过打断点查看。
React 事件和 dom 事件
两者很像,只是有一些语法上的不一样。
- 事件名 jsx 中采用驼峰命名。
- 参数是一个事件处理函数
原生的 dom 事件
click 事件和 href 的优先级:
click >>> href
第一种:Dom 元素中直接绑定
- 直接在 html 中写为字符串
如果在后面写 return false
可以阻止默认事件。注意只能是字符串形式的 js 代码,方法调用不行。
<span onclick="console.log('我被点击了!!!')">Click me</span>
复制代码
- 将 js 代码放到 js 函数中
<span onclick="handle()">Click me</span>
function handle() {
console.log('我被点击了!!!);
}
复制代码
第二种:在 JavaScript 代码中绑定
- DOM0 的写法:直接在 dom 对象上注册事件名称
此时返回 false 可以阻止默认事件。
elementObject.onclick = function(){
// 事件处理代码
}
复制代码
-
Dom 2 的写法:
- DOM2 支持同一dom元素注册多个同种事件。
- DOM2 新增了捕获和冒泡的概念。
- DOM2 事件通过 addEventListener 和 removeEventListener 管理
ele.addEventListener(‘click’, handle, false);
复制代码
事件对象
无论在DOM0还是DOM2还是DOM3中都会在事件函数中传入事件对象;
常用属性:
currentTarget : 当前时间程序正在处理的元素, 和this一样的;
target || srcElement: 事件的目标
view : 与元素关联的window, 我们可能跨iframe;
eventPhase: 如果值为1表示处于捕获阶段, 值为2表示处于目标阶段,值为三表示在冒泡阶段
preventDefault() 取消默认事件;
stopPropagation() 取消冒泡或者捕获;
stopImmediatePropagation 阻止绑定在事件触发元素其他同类事件的callback的运行
trusted: 为ture是浏览器生成的,为false是开发人员创建的(DOM3)
复制代码
注意误区:
- 在同一个对象上注册事件,并不一定按照注册顺序执行
事件目的地节点既绑定了冒泡事件也绑定了捕获事件,如果是同一类型则按照代码执行顺序执行
- event.stopPropagation(); 就是阻止事件的冒泡?
除了阻止事件的冒泡,还阻止事件的继续捕获,简而言之就是阻止事件的进一步传播。
React 事件
接口和原来的 dom 事件一致。绑定处理函数分两种情况:
包装了浏览器的原生的事件,并且是跨浏览器的。
- 不传参数
<div className="box1" onClick={this.handleClickOne}>
复制代码
- 传递参数有两种写法:
1. 箭头函数:<div className="box2" onClick={e => this.handleClickTwo(e)}
2. bind 方法:<div className="box2" onClick={this.handleClickTwo.bind(this, e, others)}
复制代码
事件重用
Event Pooling:事件池
react 中的事件会被重用,每一次事件对应的回调函数执行后事件上的所有属性都会失效。
比如通过 setTimeout 异步方式访问事件会报错。
此时的解决方法是调用 persist() 方法移出事件池从而保留事件对象。
事件处理函数的执行时机
事件处理函数都是在冒泡阶段执行,如果要让事件处理函数在捕获阶段执行,事件名后面加 Capture
就行。
onClick ==> onClickCapture
复制代码
React 中阻止事件冒泡的三种方式
合成事件中的 currentTarget 指向当前 dom 元素,但是 nativeEvent 的 currentTarget 指向 document
- 阻止合成事件间的冒泡,用e.stopPropagation();
- 阻止合成事件与最外层 document 上的事件间的冒泡
nativeEvent 的 currentTarget 指向 document
e.nativeEvent.stopImmediatePropagation();
复制代码
- 阻止合成事件与 除最外层document上的原生事件 上的冒泡,通过判断 e.target 来避免
document.body.addEventListener('click',e=>{
// 通过e.target判断阻止冒泡
if(e.target&&e.target.matches('a')){
return;
}
console.log('body');
})
复制代码
自定义 dom 事件
使用到的事件对象有 Event
和 CustomEvent
自定义事件和触发事件:
// 通过 Event 创建新的事件
const event = new Event('newEvent');
box1.addEventListener('newEvent', function() {
console.log('newEvent 事件被触发了!!!!')
});
setTimeout(function() {
// 通过调用元素的 dispatchEvent 方法在该元素上面触发该事件
box1.dispatchEvent(event);
}, 2000);
复制代码
自定义事件的时候,为事件对象添加数据:
const customEvent = new CustomEvent('customEvent', { 'data': '2121212' });
box1.addEventListener('customEvent', function(e) {
console.log('customEvent 事件被触发了!!!!', e, customEvent)
});
setTimeout(function() {
box1.dispatchEvent(customEvent);
}, 2000);
复制代码
代码控制触发内置事件
box1.addEventListener('click', function(e) {
console.log('代码控制触发内置事件', e)
});
setTimeout(function() {
const click = new MouseEvent('click')
box1.dispatchEvent(click)
}, 2000)
复制代码
其中 click
事件还可以通过 HTMLElement
对象上面的 的 click()
方法模拟。
其中 querySelector 和 querySelectorAll
是 Element
上面的方法。