javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件
1 事件冒泡
子元素触发的事件,会往上(父元素)传递;
例子:
<div id="box">
<p></p>
</div>
<script>
var oP = document.querySelector('#box p');
var oBox = document.querySelector('#box');
oBox.onclick = function () {
alert('123');
}
</script>
当我点击div中的p标签时,也会触发onclick,这是为什么?
因为事件会一直往上传递,p -> div(触发)->body ->document
冒泡事件是默认事件,但有些情况,冒泡事件是一种麻烦的事情。如:
<div id="box">
<p class="detail">
我是detail!
</p>
</div>
//我的目的本来是,点击div弹出p标签,点击document时隐藏p标签。
var oBox =document.querySelector('#box');
var oP = oBox.children[0]; //我点击oBox时弹出p标签
oBox.onclick = function () {
oP.style.display = 'block';
};
//但随着冒泡的传递,到了document时,也会触发document标签的点击事件,然后p标签刚出现的瞬间又隐藏了
document.onclick = function () {
oP.style.display = 'none';
oP.style.display = 'none';
};
这时候需要把默认事件去掉
cancelBubble = false 或者 stopPropagation();
//上述的oBox的点击事件改成
oBox.onclick = function (e) {
oP.style.display = 'block';
e = e||window.event;
e.cancelBubble = true;
或者 e.stopPropagation();
};
另外:
e.cancelBubble = true;是兼容所有浏览器的
e.stopPropagation() 不兼容IE8以下,所以一般都推荐第一种
2 onmouseenter/onmouseleave 和onmouseover/onmouseout区别
<div id="box1">1
<div id="box2">2
<div id="box3">3</div>
</div>
</div>
<script>
var oB1 = document.querySelector('#box1'); oB1.onmouseenter=function () {
console.log('enter');
}
oB1.onmouseleave=function () {
console.log('leave');
}
/*oB1.onmouseover=function () {
console.log('over');
}
oB1.onmouseout=function () {
console.log('out');
}*/
</script>
onmouseenter/onmouseleave:在移入到子元素时会触发;
当鼠标从外部移入3触发onmouseenter ,再移入2触发(3的onmouseleave)和(2的onmouseenter),在移入1触发(2的onmouseleave)和(1的onmouseenter);
onmouseover/onmouseout:不会受子元素影响
当鼠标同上移入3触发onmouseover,但继续移入到2和1中时,并不会触发onmouseover事件,当鼠标移出3到外部时才触发onmouseleave。
3 阻止默认事件 (两种方法)
1> event.preventDefault();
2>return false;
return false:相当于 event.preventDefault() + event.cancelBubble = false + event.stopPrapagation() 的集合;
4 键盘事件
事件:onkeydown 、 onkeypress 、onkeyup
键值:event.keyCode
document.onkeydown = function (e) {
e = e||window.event; console.log( e.keyCode );
if (e.keyCode === 116){
e.preventDefault();
}
}
onkeydown:
按下时触发,假设不抬起,会持续(多次)触发
onkeypress:
和onkeydown类似,但是只响应能键入值的键(比如ctrl 是不能键入值的,所以不能响应)
onkeyup:
抬起键时触发,一次抬起触发一次
又:
onkeydown在键入值之前触发
onkeyup在键入值之后触发
<input type="text" id="txt" />
<script>
var oTxt = document.querySelector('#txt'); /*
oTxt.onkeydown = function (e) {
console.log( this.value );
}*/ oTxt.onkeyup = function (e) {
console.log( this.value );
}
</script>
在input框中:
oTxt.onkeydown: 依次输入1,2,3,4 console中依次出现:1,12,123。 也就是说知道按下一个键时,才会触发上一个事件
oTxt.onkeyup: 依次输入1,2,3,4 console中依次出现:1,12,123, 1234。是同步进行的。
javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件的更多相关文章
- 事件冒泡以及onmouseenter 和 onmouseover 的不同
1. onmouseenter onmouseenter 事件在鼠标指针移动到元素上时触发. 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发. onmouseent ...
- javascript 停止事件冒泡以及阻止默认事件冒泡
停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...
- jquery防止事件冒泡和取消默认行为案例
----------------js取消事件冒泡: window.event.cancelBubble=true; --------------jquery事件参数可以防止事件冒泡: $(" ...
- JS事件——禁止事件冒泡和禁止默认事件
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...
- vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...
- 一个取消事件的简单js例子(事件冒泡与取消默认行为)
先上代码: <div id='outer' onclick='alert("我是outer")'> <div id="middle" oncl ...
- js 事件冒泡是什么如何用jquery阻止事件冒泡
什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈 (1)什么是事件起泡 首先你要明 ...
- 事件冒泡是什么如何用jquery阻止事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- Javascript和jquery事件--阻止事件冒泡和阻止默认事件
阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...
随机推荐
- Mysql字符串截取总结及项目实际运用:left()、right()、substring()、substring_index()
在实际的项目开发中有时会有对数据库某字段截取部分的需求,这种场景有时直接通过数据库操作来实现比通过代码实现要更方便快捷些,mysql有很多字符串函数可以用来处理这些需求,如Mysql字符串截取总结:l ...
- Git - .gitignore文件的用法
.gitignore文件的作用 .gitignore文件用来忽略被指定的文件或文件夹的改动,被记录在.gitignore文件里的文件或文件夹,是无法被git跟踪到的,换句话说,被忽略的文件是不会被放入 ...
- python的正则表达式支持(链接)
http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html
- tensorflow:实战Google深度学习框架第四章02神经网络优化(学习率,避免过拟合,滑动平均模型)
1.学习率的设置既不能太小,又不能太大,解决方法:使用指数衰减法 例如: 假设我们要最小化函数 y=x2y=x2, 选择初始点 x0=5x0=5 1. 学习率为1的时候,x在5和-5之间震荡. im ...
- D. Kay and Snowflake 树的重心
http://codeforces.com/contest/686/problem/D 给出q个询问,每次要求询问以x为根的子树中,哪一个点是重心. 树的重心:求以cur为根的子树的重心,就是要找一个 ...
- python_12(并发编程)
第1章 进程 1.1 队列Queue 1.2 Queue方法 1.2.1 q.get([block [,timeout]]) 1.2.2 q.get_nowait() 1.2.3 q.put(item ...
- C#连接Oracle中文乱码问题解决方法
1.打开注册表:开始-运行-regedit HKEY_LOCAL_MACHINE/SOFTWARE/ORACLE/KEY_OraDb11g_home1/OLEDB 在右侧点鼠标右键- ...
- audio、video的控制
W3C上面给的是js控制相关的播放与暂停,不过在实际开发中我们多会选择JQ来操作的,毕竟方便很多,而play()和pause()用于js play并不是jQuery的函数,而是DOM元素的函数,所以我 ...
- CSS 条纹背景深入
一.水平渐变 实现水平条纹很简单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 安卓4.4不支持touchend事件解决办法
最近的项目要求兼容到OPPO A31这款手机,这款手机是安卓4.4,调试时遇到了touch手指不能滑动页面切换的问题,最终解决通过在touchstart事件里面加上一个 event.preventDe ...