标签：function oBtn 触发 绑定 概念 事件 onclick
事件：
能被js监听到的行为
事件三要素：
1. 事件源: 触发事件的源头，谁触发的这个事件（oBtn）
2. 事件类型：是哪种事件类型，如：鼠标事件，键盘事件。。。。。（click，dblclick，mouseover，mouseout.....）
3. 事件处理函数: 事件触发后执行的行为（{}中会执行的代码）
1,oBtn.onclick = function(){}
2,obtn.onclick = fn
function fn(){}
事件中的this： 指向事件源
普通函数中的this：指向的是window
oBtn.onclick = function(){
this指向的就是oBtn
} oBtn.onclick = fn（不要带括号）
function fn(){ this指向的就是oBtn }<button onclick = 'del(this)'></button>
function del(obj){
obj 指代的就是点击元素
}1、事件绑定（事件注册）：
1.1 DOM0级事件绑定
语法：事件源.on事件类型 = 事件处理函数
距离：div.onclick = function(){}
缺点：不能给同一个对象的同一个事件进行多次绑定
优点：书写简单，兼容性好
1.2 DOM2级事件绑定（事件监听）
1.2.1
语法：事件源.addEventListener("事件类型",事件处理函数，布尔值)；第三参数可以省去
事件源.addEventListener("事件类型",事件处理函数)；第三参数可以省去
优点：可以给同一个对象的同一个事件进行多次绑定
缺点：兼容性不好（IE低版本的不支持该写法）
1.2.2 IE低版本支持
语法：事件源.attachEvent('on事件类型',事件处理函数)；只有两个参数
案列点击div,变色更改内容
1. DOM0级事件绑定
1. DOM0级事件绑定
A写的
// oDiv.onclick = function () {
// this.style.backgroundColor = 'yellow'
// }
B写的
// oDiv.onclick = function () {
// this.innerHTML = 'yellow'
// }2. DOM2级事件绑定
A
oDiv.addEventListener('click',function(){
this.style.backgroundColor = 'yellow'
})
B
oDiv.addEventListener('click',function(){
this.innerHTML = 'yellow'
})
DOM0级解绑：
事件源.on事件类型 = null
DOM2级解绑：
语法：事件源.removeEventListener('事件类型',事件处理函数)
注意：先绑定再移除（函数再外面单独书写）
1·绑定 事件源.addEventListener('事件类型',fn)
2·移除 事件源.removeListener('事件类型',fn)
function fn(){}
var oBtn = document.querySelector('button')
var oDiv = document.querySelector('div')
// // 1. DOM0级事件绑定
// // 鼠标已入
// oBtn.onmouseover = function () {
// oDiv.style.backgroundColor = 'yellow'
// }
// // 鼠标移出
// oBtn.onmouseout = function () {
// oDiv.style.backgroundColor = 'pink'
// // 移出的时候把移入事件给清除了
// oBtn.onmouseover = null;
// }2. DOM2级事件绑定和解绑
/ 绑定了两个事件
oBtn.addEventListener('mouseover',fn1)
oBtn.addEventListener('mouseout',fn2)
function fn1(){
oDiv.style.backgroundColor = 'yellow'
}
function fn2(){
oDiv.style.backgroundColor = 'pink'
// 移除的时候，解绑移入事件
oBtn.removeEventListener('mouseover',fn1)
}
js类型：
鼠标事件
click 单击
dblclick 双击
mouseover/mouseout 移入移出
mouseenter/mouseleave 移入移出
mousedown/mousemove/mouseup 按下/移动/抬起 （拖拽）
contextmenu 右键
表单事件
focus 获取焦点时触发
blur 失去焦点时触发
input 输入内容时触发
change 内容改变时触发
submit 提交时触发
reset 重置时触发
键盘事件
注意：不是任何元素都可以绑定键盘事件的,window,document.表单元素是可以绑定这几个事件的
keydown ：按下键盘的键时触发的，会连续触发
keypress：按住键盘中键时触发的，会连续触发
keyup：从键盘中的一个键抬起时触发，从键上抬起的那一刻触发一次（**）
案列，输入内容时span得内部数字发生变化
1. 输入内容的个数？oIpt.value.length
2. 还剩多少个 100 - 输入的个数
3. 放到span中
$('input').onfocus = function(){
$('span').innerHTML = '亲，请输入'
this.nextElementSibling.style.color = 'red'
this.style.color = 'green'
}
$('input').onblur = function(){
this.nextElementSibling.innerHTML = ''
}键盘事件
注意：不是任何元素都可以绑定键盘事件的,window,document.表单元素是可以绑定这几个事件的
keydown ：按下键盘的键时触发的，会连续触发
keypress：按住键盘中键时触发的，会连续触发
keyup：从键盘中的一个键抬起时触发，从键上抬起的那一刻触发一次（**
// $('input').onkeydown = function(){
// console.log(1);
// }
// $('input').onkeypress = function(){
// console.log(1);
// }
// $('input').onkeyup = function(){
// console.log(1);
// }事件对象：
干什么的：事件对象中包含（记录）该事件发生时的一系列的信息
事件对象的获取：
标准浏览下获取:
事件处理函数的参数位置，书写一个参数，这个参数就是事件对象
odiv.onclick = function(e){
e就事件对象
}
IE低版本获取： 事件处理函数的内部用window.event来表示事件对象
处理兼容性问题：
odiv.onclick = function(e){
var ev = e || window.event;//ev就是兼容性的事件对象
鼠标事件对象的一些属性：
1. e.pageX和e.pageY : 鼠标点击位置距离页面的左偏移量和上偏移量
1. e.clientX和e.clientY ：鼠标点击位置距离浏览器窗口的左偏移量和上偏移量
1. e.offsetX和e.offsetY ：鼠标点击位置距离自身元素(事件源)的左偏移量和上偏移量
$('div').onclick = function (e) {
// console.log("e.clientX:"+e.clientX+","+"e.pageX:"+e.pageX);
// console.log("e.clientY:"+e.clientY+","+"e.pageY:"+e.pageY);
console.log(e.clientX);
console.log(e.clientY);
}标签：function,oBtn,触发,绑定,概念,事件,onclick 来源： https://blog.csdn.net/APPTX4869/article/details/121951202
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。