【JavaScript】DOM之事件
DOM
事件
1.事件是什么
让JS知道程序用户行为，比如用户点击HTML页面中的某个按钮和用户输入用户名与密码等操作
<script>
var button = document.getElementById('btn');
// 获取按钮元素
button.onclick = function () {
// 事件绑定
console.log('你已点了我');
}
</script>2.注册事件
JS函数与指定事件相关联，被绑定函数成为事件的句柄
事件被激发时，会绑定函数会被调用
HTML元素的事件属性
表示实注册事件功能
该方式并没有与HTML结构与行为有效的分离
<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
function mylove() {
console.log('你已点了我');
}
</script>
</body>DOM对象的事件属性
将Document对象定位在THML页面元素
并返回DOM对象体属性，通过它实现各种注册事件功能
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = mylove;
function mylove() {
console.log('你已点了我');
}
</script>
</body>事件监听器
以addEvantLisener()方法，调用该方法表示元素增加事件监听器
body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick',function () {
console.log('XXX');
})
function bind(element,eventName, functionName) {
if (element.addEventListener) {
element.addEventListener()
}
}
</script>
</body>事件监听器中的this
使用addEventListener()方法为页面注册事件时候，this是指注册事件元素
使用attachEent()方法为页面注册事件时候，this是指Window对象，，不是注册事件
<script>
var qyc =document.getElementById('qyc');
/*qyc.addEventListener('click',function () {
console.log(this);//this指当前绑定事件的元素
});*/
/*qyc.attachEvent('onclick',function () {
console.log(this);//this指当前环境的全局对象（Window对象）
});*/
bind(qyc,'click',function () {
console.log(this);//在不同的浏览器中，this会有不同的表示
});
function bind(element, eventName, functionName) {
if (element.addEventListener) {
} else {
element.attachEvent('on' + eventName, function () {
functionName.call(element)
});
}
}//此为IE8之前的版本兼容的解决方案
</script>
</body>3.移除注册事件
removeEventListener()方法，调用此方法表示元素移除事件听器
<body>
<button id="qyc">按钮</button>
<script>
var qyc = document.getElementById('qyc');
function mylove() {
console.log('XXX');
}
qyc.addEventListener('click',mylove);
qyc.addEventListener('click',function () {
console.log('YYY');
});
qyc.removeEventListener('click',mylove);
function unbind(element,eventName,functionName) {
if (element.removeEventListener) {
element.removeEventListener(eventName, functionName);
}else {
element.detachEvent('on' + eventName, functionName);
}
}
</script>
</body>4.Event事件对象
表示移除注册事件在IE8之前版本的
浏览器不支持removeEventListener()方法
<body>
<button id="qyc" onclick="mylove(event)">按钮</button>
<script>
var qyc = document.getElementById('qyc');
qyc.addEventListener('click',function (event) {
console.log(event);
});
qyc.attachEvent('onclick',function () {
console.log(window.event);
});
function bind(element,eventName, functipnName) {
if (element.addEventListener){
element.addEventListener(eventName,functipnName)
} else {
element.attachEvent('on' + eventName, function(){
functipnName.call(element);
});
}
}
</script>5.获取目标
Event事件对象提供target属性，获取触发当前事件的HTML元素
Event事件对象提供currentTarget属性，获取注册当前事件的HTML元素
<style>
ul {
background-color: red;
}
#wl {
background-color: blue;
}
a {
background-color: yellow;
}
</style>
</head>
<body>
<ul id="yx">
<li>单机游戏</li>
<li id="wl"><a href="#">网络游戏</a></li>
<li>手机游戏</li>
</ul>
<script>
var yx = document.getElementById('yx');
yx.addEventListener('click',function (event) {
console.log(event.target);
// target属性-获取绑定当前事件目标元素
console.log(event.currentTarget);
// currentTarget属性-获取绑定当前事件目标元素
console.log(this);
});
yx.attachEvent('onclick',function (event) {
// IE8以下浏览器提供srcElement属性为target目标元素
var e = event || window.event;
console.log(e.srcElement);
});
</script>
</body>6.阻止默认行为
不使用默认，而是
<body>
<a href="#">链接</a>
<script>
var aElement = document.getElementsByName('a');
/*aElement.addEventListener('click',function(event){
event.preventDefault();// 阻止默认行为
});*/
aElement.onclick = function (event) {
event.preventDefault();
return false;
}
aElement.attachEvent('onclick',function (event) {
var e = event || window.event;
e.returnValue = false;
})
</script>
</body>7.获取鼠标
pageX和pageY表示相对于页面中
clientX和clientY表示可视区域
screenX和screenY表示在当前屏幕的
<body>
<script>
var html = document.documentElement;
html.addEventListener('click',function(event){
console.log(event.pageX, event.pageY);
// 鼠标坐标值相对于当前HTML页面
console.log(event.clientX, event.clientY);
// 鼠标坐标值相对于当前可视区域
console.log(event.screenX, event.screenY);
// 鼠标坐标值相对于当前屏幕的
// 鼠标坐标值只能获取，不能设置
});
</script>
</body>8.事件流
<style>
#q1 {
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
}
#q2 {
width: 100px;
height: 100px;
background-color: yellow;
padding: 50px;
}
#q3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">
<div id="q3"></div>
</div>
</div>
<script>
var q1 = document.getElementById('q1');
q1.addEventListener('click',function(){
console.log('这是d1... ...');
}, false);
var q2 = document.getElementById('q2');
q2.addEventListener('click',function(){
console.log('这是d2... ...');
}, false);
var q3 = document.getElementById('q3');
q3.addEventListener('click',function(event){
console.log('这是q3... ...');
event.stopPropagation();
}, false);
</script>
</body>9.事件委托
大量的HTML元素注册相同事件，并事件句柄逻辑安全相同，会造成页面速度下降，不果事件流允许这些HTML元素同父级元素注册事件
<body>
<div id="qh">
<button id="qyc1">按钮</button>
<button id="qyc2">按钮</button>
<button id="qyc3">按钮</button>
</div>
<script>
var qyc1 = document.getElementById('qyc1');
qyc1.addEventListener('click',function(){
console.log('这是个按钮');
});
var qyc2 = document.getElementById('qyc2');
qyc2.addEventListener('click',function(){
console.log('这是个按钮');
});
var qyc3 = document.getElementById('qyc3');
qyc3.addEventListener('click',function(){
console.log('这是个按钮');
});
var qh = document.getElementById('qh');
// 不把事件绑定给指定元素，绑定给共同父级和祖先元素
qh.addEventListener('click',function (event) {
var target = event.target;//触发事件目标元素
if(targe.nodeName === 'BUTTON') {
console.log('这是个按钮');
}
})
</script>
</body>【JavaScript】DOM之事件的更多相关文章
- JavaScript Dom 绑定事件
JavaScript Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementByI ...
- JavaScript DOM 注册事件
一个HTML是一个DOM树,每一个节点都是DOM对象,整个HTML其实也是一个DOM对象,根节点是<html>; 在HTML页面初始化的时候,JavaScript会自动帮DOM对象注册消息 ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
- JavaScript Dom 事件
JavaScript Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...
- 2014年辛星解读Javascript之DOM之事件及其绑定
我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...
- 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
随机推荐
- 前端借助接口获取ip地址
<script language="javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js&q ...
- js中ajax请求返回的数据处理成数组后，局部变量赋值给全局变量后，为空
第二步是想把ss的值扔给res_r,两个数组直接相等即可,可谁想到,取出来的值是空. 如图取出来的值是空. 我一脸懵逼,调试了些许时间,最后把ss遍历一下,在重新push进res_r 再来看效果,已经 ...
- lesson1-图的概念和图论模型
说明: 图论专题开设的目的主要是作为本学期复习巩固和分享自己对于图论的理解,主要参考的是老师的PPT.应老师要求,不能共享文件,抱歉! 参考书目:[1] J.A. Bondy, U.S.R. Mur ...
- 多线程12-ManualResetEventSlim
)); )); )); t1.Start(); t2.Start(); ...
- [Python3] 016 字典：给我一块硬盘，我可以写尽天下！
目录 0 字典的独白 1 字典的创建 2 字典的特性 3 字典的常见操作 (1) 数据的访问.更改与删除 (2) 成员检测 (3) 遍历 4 字典生成式 5 字典的内置方法 6 可供字典使用的其它方法 ...
- dfs（找环）
https://codeforces.com/problemset/problem/1249/B2 B2. Books Exchange (hard version) time limit per t ...
- vue路由定义
router 根据URL分配到对应的处理程序 单应用页面,vue开发中只有一个一面 例如我们在开发移动端的时候,正常情况下底部的tab有四个选项: 首页 home 发现 find 订 ...
- 帝国CMS 列表内容模板[!--empirenews.listtemp--]改写为灵动标签[e:loop={}]
需求描述: 1.将专题列表下的列表单元,自动根据专题页标题或者页面关键词来匹配展示: 2.第一个精确匹配,后面十一个模糊匹配,总数12个: 正文模板中,引入部分为: [!--empirenews.li ...
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- Python之路-函数基础&局部变量与全局变量&匿名函数&递归函数&高阶函数
一.函数的定义与调用 函数:组织好的.可重复使用的.用户实现单一或者关联功能的代码段.函数能够提高应用的模块性和代码的重复利用率.Python提供了很多内置的函数,比如len等等,另外也可以根据自己的 ...