JavaScript 13 事件详解及应用

2021-06-13 11:03:18 阅读：510 来源： 互联网

标签：function 13 console log JavaScript 详解事件 onclick btn

.addEventListener()　　//同一个事件注册多个处理函数

<input type="button" value="按钮" id="btn">
<script>
    btn = document.getElementById('btn');
btn.addEventListener('click', function(){alert('hello world');})
btn.addEventListener('click', function(){alert('123')})
</script>

注册事件的方式：

1 btn.onclick=function(){}　　//缺点：无法给同一个对象的同一个事件注册多个事件处理函数。因为‘=’为赋值，会把第二个function覆盖第一个function

2 btn.addEventListerner()　　//可以付多个处理函数。但是有兼容性问题。IE9以后支持

3 .attachEvent() 　　//兼容问题，不讲了

处理注册事件的兼容性问题(addEventListener)

//处理事件兼容性问题
//eventname不带on，click mouseover。 mouseout
function addEventListener(elemnet,eventName,fn){
//判断当前浏览器是否支持addEventListener方法
    if(element.addEventListener){
        element.addEventListener(eventName,fn);    //第三个参数默认是false
    }else if (elemnet.attachEvent) {
        elemnet.attachEvent('on' + eventName,fn); 
    }else {
        //相当于element.onclick = fn;
        elemnet['on'+ eventName] = fn;
    }
}

移除元素事件方式：(使元素事件变成一次性的事件，只能运行一次)

onclick = fn

btn.onclick = function(){
    alert('123');
    //移除事件
    btn.onclick=null;
}

addEventListener

btn.addEventListener('click',function(){alert(123)})
//移除事件。因为事件的function是匿名函数访问不到，所以，要想移除上面的事件，函数必须有名字


fucntion btnclick(){
alert(123);
btn.removeEventListener('click',btnclcik);    //移除写在函数中，直接一次性
}
btn.addE ventListener('click',btnclick);

处理移除兼容性问题

//处理事件兼容性问题
function removeEventListener(elemnet,eventName,fn){
//判断当前浏览器是否支持addEventListener方法
    if(element.removeEventListener){
        element.removeEventListener(eventName,fn);    //第三个参数默认是false
    }else if (elemnet.detachEvent) {
        elemnet.detachEvent('on' + eventName,fn); 
    }else {
        //相当于element.onclick = fn;
        elemnet['on'+ eventName] = null;
    }
}

事件冒泡：https://www.cnblogs.com/moqing/p/5590216.html

事件委托（原理是事件冒泡）：事件委托不用给内部的每个标签都写事件，只需给他们的父标签写就好了

<ul id = 'ul'>
    <li>西施</li>
    <li>貂蝉</li>
    <li>昭君</li>
    <li>凤姐</li>
    <li>芙蓉姐姐</li>
</ul>
<script>
//事件委托原理是事件冒泡
var ul = document.getElementBuId('ul');
//e是事件参数(事件对象)：当事件发生的时候，可以获取一些和事件相关的数据
ul.onclick = function(e){
//获取到当前点击的li，e.target是真正触发事件的对象
console.log(e.target);
//让点击的li高亮显示
e.target.style.backgroundColor = 'red';
}
</script>

时间对象

通过事件对象的属性，可以获取到事件发生的时候和事件相关的一些数据,btn.onclick = function(e){},e就是事件对象

处理时间对象的浏览器兼容性

e=e || window.event

e.eventPhase属性：代表事件的阶段。返回1，2，3。　　1：事件捕获阶段 2：目标阶段(事件执行阶段) 3：冒泡阶段

e.target：获取真正触发事件的对象

e.currentTarget：事件处理函数所在的对象，和this一样

e.type　　获取事件名称

btn.onclick = function(e){
console.log(e.eventPhase);
console.log(e.target);
console.log(e.currentTarget);
}

获取鼠标在浏览器的可视区域的坐标

<div id = 'box'>
<script>
var box = document.getElementById('box');
box.onclick = function(e){
e = e || window.event;
//获取鼠标在浏览器的可视区域的坐标  不包含滚动轴
console.log(e.clientX)；
console.log(e.clientY)；
//鼠标在当前页面的位置  包含滚动轴　　page注意兼容性问题 
console.log(e.pageX);
console.log(e.pageY);
}
</script>

跟着鼠标走的图片：

<img src = "xxx.gif" id = "img">
<srcipt>
img = document.getElementById('img');
document.onmousemove = function(e){
e = e || window.event;
img.style.left = e.pageX + 'px';
img.style.top = e.pageY + 'px';
}
</srcipt>

输出页面滚动出去的距离

//横向滚动出去的距离
console.log(document.body.scrollLeft);
//纵向滚动出去的距离
console.log(document.body.scrollTop);

获取鼠标在当前盒子内相对盒子的坐标：盒子内的坐标减去外部坐标

<div id = 'box'>
</div>
<script>
//获取盒子的距离
var box = document.getElementById('box');
box.onclick = function(){
console.log(this.offsetLeft);
console.log(this.offsetTop);
}
</script>

<div id = 'box'>
</div>
<script>
var box = document.getElementById('box');
box.onclick = function(e){
e = e || window.event;
//获取鼠标在盒子中的位置 = 鼠标的坐标 - 盒子的坐标
var x = e.pageX - this.offsetLeft; 
var y = e.pageY - this.offsetTop; 
}
</script>

取消默认行为的执行：

事件函数末尾添加：
return false;

DOM标准方法：
e.preventDefault();    //兼容问题

阻止事件冒泡：事件函数末尾添加：e.stopPropagation();

键盘事件：

keydown:　　键盘按下的时候

keyup：键盘弹起的时候

onkeydown和onkeyup的区别：keydown的时候我们所按的键还没落入文本框，而keyup的时候按的键已经落入文本框了

标签：function,13,console,log,JavaScript,详解,事件,onclick,btn
来源： https://www.cnblogs.com/xiaoyuheng/p/14879827.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript 13 事件详解及应用