js-07-事件
一、js事件绑定在对象上的三种方法
a:将事件绑定在元素标签的属性上
<h3 onclick="console.log('奥特曼打怪兽')">海绵宝宝历险记</h3>
b:将事件作为属性添加到对象上
<h4>海绵宝宝历险记2</h4> window.onload = function(){
var h4 = document.getElementsByTagName('h4')[0];
h4.onclick = function(){
console.log('奥特曼第二次打怪兽');
}
}
c:将事件作为方法添加到对象上。 方法名称:addElementListener()→ 向指定元素添加事件
<h4>海绵宝宝历险记3</h4> window.onload = function(){
var h4 = document.getElementsByTagName('h4')[0];
var fyh=function(){
console.log('奥特曼第三次打怪兽');
} h4.addEventListener('click',fyh,false);
//事件名称、处理程序(回调方法)、false以冒泡方式处理
h4.removeEventListener('click',fyh,false);
//将次方法移除;方法名称:removeEventListener }
事件监听→ 事件监听移除
true 的触发顺序总是在 false 之前;
如果多个均为 true,则外层的触发先于内层;
如果多个均为 false,则内层的触发先于外层。
二、冒泡事件和捕获事件
//捕获事件发生过程:window-document-body-div-button (从大到小)
//冒泡事件发生过程:div-body-document-window (从小到大)
a:冒泡事件
<h2>中国</h2>
<ul>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ul>
<script>
window.onload = function(){
var li= document.getElementsByTagName('li');
var ul= document.getElementsByTagName('ul')[0];
document.body.onclick=function(m){
alert('我是body');
}
ul.onclick=function (m){
alert('我是ul');
}
for (var i=0;i<li.length;i++){
li[i].onclick=function (m){
alert('我是li');
//冒泡拦截
m.cancelBubble=true; //拦截冒泡
m.stopPropagation();
}
}
}
</script>
注:a:输出结果由内往外弹出我是li/ul/body
b:cancelBubble=true{true为拦截冒泡,默认值是false}
stopPropagation()
俩个同为拦截冒泡的方式,写在一起是为了浏览器兼容使用。
b:捕获事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2{width:200px;height:200px;background:#f00;} </style>
</head>
<body>
<div id="div2">
<div id="div1">点我</div>
</div>
<script>
//事件的捕获
var div2=document.getElementById('div2');
var div1=document.getElementById('div1');
div2.addEventListener('click', function(event){console.log("A");}, false);
// div2.addEventListener('click', function(event){console.log("B");});
div1.addEventListener('click', function(event){console.log("C");}, false);
// div2.addEventListener('click', function(event){console.log("D");}, true);
</script>
</body>
</html>
注:返回结果为C、A
三、addEventListener绑定click与直接写onclick的区别
<body>
<!--addEventListener绑定click与直接写onclick的区别-->
<ul id="difference">
<li id="add_event">11111111</li>
<li id="on_click">22222222222</li>
</ul>
<script>
var on_click = document.getElementById('on_click');
on_click.onclick=function(){
// alert('click1');
};
on_click.onclick=function(){
// alert('click2');
};
//onclick绑定了两次,由于click在同一时间只能指向唯一对象,所以当对象绑定了多次,只会出现最后一次绑定。 var add_event = document.getElementById('add_event');
add_event.addEventListener('click',function(){
alert('add_event1');
},false);
add_event.addEventListener('click',function(){
alert('add_event2');
},false); //多次事件绑定的运行时使用
</script>
</body>
四、onchange事件(HTML元素被改变)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase(); //获取X内的值,将input框内元素被
改变。
}
</script>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p>
</body>
</html>
五、onkeydown(用户按下键盘按键)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function myFunction(){
alert("你在输入栏内按下一个键");
}
</script>
</head>
<body>
<p>当你在输入框内按下一个按键是函数被触发</p>
<input type="text" onkeydown="myFunction()">
</body>
</html>
六、onmouseover(用户把鼠标移到HTML上)和onmouseout(用户把鼠标移开HTML上)
{示例参考w3c}
js-07-事件的更多相关文章
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
- js键盘事件全面控制
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js键盘事件全面控制详解【转】
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js 鼠标事件的抓取代码
js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...
- js Touch事件(向左滑动,后退)
js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev) ...
随机推荐
- shell du sh 文件大小输出
按照文件大小升序输出结果: du -sh * | sort -h 如果要逆序输出,则: du -sh * | sort -hr
- luogu P2824 [HEOI2016/TJOI2016]排序
题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这个全排列序列进行 ...
- 这些C++常用内置函数你会几个??
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:Regina520 新手注意:如果你C++学的不好,可以去拿我的C+ ...
- 用.NET模拟天体运动
用.NET模拟天体运动 这将是一篇罕见而偏极客的文章. 我上大学时就见过一些模拟太阳系等天体运动的软件和网站,觉得非常酷炫,比如这个(http://www.astronoo.com/en/articl ...
- 把JSON转换成键值对
public static Dictionary<string, string> JsonStringToKeyValuePairs(string jsonStr) { char json ...
- linux-history、find、
1.history:查看历史记录 -c:清除历史命令记录 -d:删除某一条使用过的命令,-d后跟命令的序列号 2.find:在目录结构中搜索文件 -type:后面跟文件的类型,d表示目录,f表示文件 ...
- 介绍一款自己实现的rabbit轻量级组件和使用方法
DotNetCore.RabbitMQ.Extensions介绍 这是一个 基于.NETStandard 2.0的Rabbit轻量级框架,可以让开发人员无需关注底层变动,专注编写业务代码,从而达到便捷 ...
- Fusion360_Generative Design 入门学习笔记
2019.12.17更新 初次见到衍生式设计的时候感觉非常惊艳,现在觉得这个功能就是个弟弟,只能做一些中看不中用的东西.这个方法的理论基础是拓扑优化,想做research的同学可参阅"如何入 ...
- 201871010119-帖佼佼《面向对象程序设计(java)》第十六周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
- ubuntu16.04修改ssh的端口
直接修改文件 /etc/ssh/sshd_config文件,