【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 ...
随机推荐
- 倾旋之slack主题协同
源:https://pocketcorp.slack.com/join/shared_invite/enQtNTk2MDYwNDA4NzU0LTg3ZGVlNDE5NWUzNjJhZTc1MDQ5MT ...
- 使用xmake优雅地描述工程
描述语法 xmake的描述语法基于lua实现,因此描述语法继承了lua的灵活性和简洁性,并且通过28原则,将描述作用域(简单描述).脚本作用域(复杂描述)进行分离,使得工程更加的简洁直观,可读性非常好 ...
- [Python3] 005 列表的基本使用
目录 1. 列表概述 2. 创建列表 3. 列表常用操作 (1) 访问列表 (2) 分片操作 1) 正向操作 2) 反向操作 3) 内置函数 id() 加入队伍 1. 列表概述 一组有顺序的数据的组合 ...
- STS安装Drools
download drools (including "Drools Engine" & "Drools and jBPM tools") from o ...
- Water Tree CodeForces 343D 树链剖分+线段树
Water Tree CodeForces 343D 树链剖分+线段树 题意 给定一棵n个n-1条边的树,起初所有节点权值为0. 然后m个操作, 1 x:把x为根的子树的点的权值修改为1: 2 x:把 ...
- 洛谷P1095守望者的逃离题解-伪动态规划/贪心
链接 题目描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这个荒岛施咒,这座岛很 ...
- SCUT - 153 - 小马哥和他的山脉 - 线段树
https://scut.online/p/153 其实不需要用线段树,只关心相邻元素的差,像神仙那样用差分就可以O1维护的. 但是我偏要用. 交之前写的那个,注意没有st本身的线段树只有lazy标记 ...
- [ASP.NET Core 3框架揭秘] 依赖注入：IoC模式
原文:[ASP.NET Core 3框架揭秘] 依赖注入:IoC模式 正如我们在<依赖注入:控制反转>提到过的,很多人将IoC理解为一种“面向对象的设计模式”,实际上IoC不仅与面向对象没 ...
- go中string类型转换为基本数据类型的方法
代码 // string类型转基本数据类型 package main import ( "fmt" "strconv" ) func main() { str1 ...
- jQuery中$.get()和$.post()的异同点
相同点:两者都是向服务器异步请求数据的. 不同点: 1.$.get() 方法使用GET方法来进行异步请求的,$.post() 方法使用POST方法来进行异步请求的. 2.如果前端使用$.get() 方 ...