JS之事件

loveDingDang_

于 2021-12-15 15:29:35 发布

阅读量884

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/loveDingDang_/article/details/121951853

版权

JavaScript学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、概念

事件：能被JS监听到的行为

二、事件三要素

事件源-------------触发事件的源头，谁触发的这个事件（oBtn）
事件类型----------是哪种事件类型（鼠标事件，键盘事件。。）
事件处理函数-----事件触发后执行的行为（{}中会执行的代码）

 1、形式一
      oBtn.onclick = function(){
        this指向的就是oBtn  
      }
 2、形式二
    oBtn.onclick =  fn（不要带括号）   function fn(){   this指向的就是oBtn   }
 3、形式三 
    <button onclick = 'del(this)'></button>
    function del(obj){
        obj 指代的就是点击元素
    }

4、 普通函数内的this
    function method(){
           consoloe.log(this)
    }

注意：

事件中的this：指向事件源

普通函数中的this：指向的是window

三、事件绑定（事件注册）

1.DOM 0级事件绑定

语法：事件源.on事件类型 = 事件处理函数
距离：div.onclick = function(){}
缺点：不能给同一个对象的同一个事件进行多次绑定
优点：书写简单，兼容性好

2.DOM2级事件绑定（事件监听）

2.1标准浏览器

语法：事件源.addEventListener("事件类型",事件处理函数，布尔值)；第三参数可以省去
事件源.addEventListener("事件类型",事件处理函数)；第三参数可以省去
优点：可以给同一个对象的同一个事件进行多次绑定
缺点：兼容性不好（IE低版本的不支持该写法）

2.2 IE 低版本支持

语法：事件源.attachEvent('on事件类型',事件处理函数)；只有两个参数

四、事件解绑

1.DOM 0级解绑

事件源.on事件类型 = null

2.DOM 2级解绑

语法：事件源.removeEventListener('事件类型',事件处理函数)

注意：先绑定再移除（函数再外面单独书写）

1·绑定事件源.addEventListener('事件类型',fn)

2·移除事件源.removeListener('事件类型',fn)

function fn(){}

五、事件类型 ***

1、鼠标事件

click 单击
dblclick 双击
mouseover / mouseout 移入移出
mouseenter / mouseleave 移入移出
mousedown / mousemove / mouseup 按下 / 移动 / 抬起（拖拽）
contextmenu 右键

2.表单事件

focus --------获取焦点时触发
blur--------- -失去焦点时触发
input--------- 输入内容时触发
change------ 内容改变时触发
submit-------提交时触发
reset ------- 重置时触发

注意

input: 输入的时候就触发

change:内容改变就触发（1. 需要失去焦点一次，2. 内容是相较于初始状态发生变化了就触发）

3.键盘事件

注意：不是任何元素都可以绑定键盘事件的,window,document.表单元素是可以绑定这几个事件的
keydown ：按下键盘的键时触发的，会连续触发
keypress：按住键盘上键时触发的，会连续触发
keyup：从键盘上抬起时触发，从键上抬起的那一刻触发一次（*常用*）

4.浏览器事件 (都只有仅有window触发)

window.onscroll = function(){} 页面滚动时触发
window.onresize = function(){} 页面窗口大小变化时触发
window.onload = function(){} 页面资源（图片，音频，视频，dom节点）加载完成时触发

六、事件对象

概念：事件对象中包含（记录）该事件发生时的一系列的信息

1、事件对象的获取

标准浏览下获取:

事件处理函数的参数位置，书写一个参数，这个参数就是事件对象

odiv.onclick = function(e){ e就事件对象 }

IE低版本获取：

事件处理函数的内部用window.event来表示事件对象

2、处理兼容问题：

odiv.onclick = function(e){
                var ev = e || window.event;//ev就是兼容性的事件对象
         }

七、鼠标事件对象的一些属性：

e.pageX 和 e.pageY---------鼠标点击位置距离页面的左偏移量和上偏移量
e.clientX 和 e.clientY -------鼠标点击位置距离浏览器窗口的左偏移量和上偏移量
e.offsetX 和 e.offsetY ------鼠标点击位置距离自身元素(事件源)的左偏移量和上偏移量

八、键盘事件的事件对象的属性

1.事件源头
2.事件类型
3.按下哪个键（ ev.keyCode : 返回数字，每个键对应不同的数字，回车键 enter对应--13）
4.是否按下了Ctrl（ ev.ctrlKey:返回 true 代表你按下了Ctrl，返回 false 代表没有按下Ctrl ）

（ ev.altKey :返回 true 代表你按下了alt ，返回 false 代表没有按下alt ）

 document.querySelector('input').onkeyup = function (e) {
        var ev = e || window.event;
        // console.log(ev.keyCode);//按键的键码
        console.log(ev.altKey);//按下其他键的同时按下alt键返回true，否则false
    }

九、元素的大小和位置

1.获取元素的大小

1.1 元素的可视宽（不包含边框） oDiv.clientWidth----------内容区宽+padding
元素的可视高（不包含边框） oDiv.clientHeight----------内容区高+padding
1.2 元素的占位宽（包含边框） oDiv.offsetWidth----------内容区宽+padding+border
元素的占位高（包含边框） oDiv.offsetHeight---------内容区高+padding+border

2.获取浏览器窗口的宽度