event操作绑定

最新推荐文章于 2023-02-08 10:02:51 发布

有一点菜

最新推荐文章于 2023-02-08 10:02:51 发布

阅读量262

点赞数 1

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_59595975/article/details/120167232

版权

event操作绑定

操作双标签的内容

innerText/innerHTML

console.log(document.querySelector('#dv').innerText);
document.querySelector('#dv').innerText = '66';

操作单标签的内容

自有属性直接用元素

语法:元素.属性名

console.log(document.querySelector("img").src);  //查看src的路径
document.querySelector(img).src="./images/2.jpg";//给src路径直接赋值地址路径
document.querySelector('img').setAttribute('src','./images/2.jpg');//设置src的属性值

操作表单标签的内容

语法:表单元素.value

type=text  
type=password 
type=button 
type=submit 
type=reset 
type=search 
type=email 
type=file....   (
type=checkbox type=radio)

 但是其中的单选框和复选框需要我们自己填写;

var username = document.querySelector('input[type=text]')
console.log(username.value);
username.value = '6666';

获取单选框中的值，确定那个被选中

被选中的标签，checked属性值为true,未被选中的是false

var rads = document.querySeletorAll("input[type=radio]");
fro(let i = 0; i < rads.length; i++){
    if(rads[i].checked){
        console.log(rads[i].value);
    }
}

事件

组成

事件由事件源事件类型事件处理程序
- 事件源:触发事件元素;
- 事件类型: 触发什么样的事件;
- 事件处理程序: 事件触发后要做哪些事事件处理函数;
```
let dv = document.querySelector("div");
dv.onclick = function(){
    console.log("one")
}
dv 是事件源     click 是事件类型     =后面的是事件处理函数;
```

对象

事件对象：是用来描述事件信息的对象
事件处理函数中的第一个形参，就是事件对象
存在兼容问题

语法: window.event || e = e;

  document.getElementsByTagName('div')[0].onclick = function(e){
    // console.log(e); // 事件处理函数中的第一个形参，就是事件对象
    // console.log(window.event);
    // 短路写法 写事件对象的兼容
    e = e || window.event;
    console.log(e);
  }

鼠标点击光标定位

clientX/Y 是点击位置相当于可视窗口左上角的定位;
page X/Y 是点击位置相当于页面的左上角的定位;
offsetX/Y 是点击位置相当与元素的左上角的定位;

  document.onclick = function(e){
    e = e || window.event;
    console.log(e.pageX); // 相对于页面
    console.log(e.clientX); // 相对于窗口
    console.log(e.offsetX);// 相对于点击的元素
  }

拓展

获取浏览器的宽高:

document.documentElement.clientWidth/clientHeight;

键码(兼容)

语法:e.keyCode||e.which
keyCode 在低版本的谷歌和火狐中不能使用可以使用which
键盘事件对象中有一个键码属性 keyCode
键码就是按下按键的阿斯克码

点击按键信息（了解）

我们使用 事件对象.button 来获取信息
0 为鼠标左键，2 为鼠标右键,1为鼠标的滚轮键;

常见的事件（了解）

浏览器事件
鼠标事件
键盘事件
表单事件
触摸事件

浏览器事件

load:页面加载完成后才执行的事件
- 语法:window.load
scroll:浏览器滚动触发的事件
- 语法:window.scroll
...

鼠标事件

click:点击事件;
dblclick:双击事件;
mousedown:鼠标按下事件;
mouseup:鼠标抬起事件;
mouseover:鼠标移入事件;(移入元素子级也会有触动)
mouseenter:鼠标移入事件;(在元素的宽高内便不会触动)
mouseout: 鼠标移出事件;(移入元素子级也会有触动)
mouseleave:鼠标移出事件;(在元素的宽高内便不会触动)
contextmenu:鼠标右击事件;
mousemove:鼠标移动事件;

键盘事件

键盘事件对象中有一个键码属性 keyCode
- 键码就是按下按键的阿斯克码
- keyCode 在低版本的谷歌和火狐中不能使用可以使用which

keydown:键盘按下事件;
- 返回值:不区分大小写;
keypress:键盘按下再抬起事件;
- 很多的系统功能按键不会触发例如：esc按键等等
keyup:键盘抬起事件;

表单事件

change:表单内容改变事件;
input:表单内容输入事件;
submit:表单提交事件;
focus:获取焦点事件;
blur:失去焦点事件;

触摸事件(移动端)

touchstart :触摸开始
touchend:触摸结束
touchmove:触摸移动

组合按键

组合案件最主要的就是 alt / shift / ctrl 三个按键
在我点击某一个按键的时候判断一下这三个键有没有按下，有就是组合了，没有就是没有组合
事件对象里面也为我们提供了三个属性
- altKey` ：alt 键按下得到 true，否则得到 false
- shiftKey ：shift 键按下得到 true，否则得到 false
- ctrlKey ：ctrl 键按下得到 true，否则得到 false

我们就可以通过这三个属性来判断是否按下了

document.onkeyup = function (e) {
  e = e || window.event
  keyCode = e.keyCode || e.which
  
  if (e.altKey && keyCode === 65) {
    console.log('你同时按下了 alt 和 a')
  }
}

事件绑定

on+事件类型

在同一个元素身上同一个事件，不能绑定多个事件处理函数

div.onclick = function(){
    console.log('click1');
}
addEv

entListener( 事件类型,事件处理函数,冒泡/捕获)

在低版本的ie浏览器中不支持
可以给同一个元素同一事件，绑定多个事件处理函数，按上到下的顺序执行
默认冒泡类型(false); 捕获(true); 准确触发事件的这个元素，我们叫目标(target)
- 冒泡: 从结构最深的开始到window;
- 捕获: 从点击目标开始到最小子级;
```
div.addEventListener('click',function(){
    console.log('click1');
})
div.addEventListener('click',function(){
    console.log('click2');
})
```

attachEvent(on+事件类型,事件处理函数)

在低版本的ie浏览器中使用

可以给同一个元素同一事件，绑定多个事件处理函数，按上到下的倒序执行

div.attachEvent('onclick',function(){
    console.log('click1');
})
div.attachEvent('onclick',function(){
    console.log('click2');
})

两者的区别

事件类型 : 的前面有无on 绑定
参数的数量;
执行的顺序
适用的浏览器;
- addEventListener ：非 IE 7 8 的浏览器
- attachEvent ： IE 7 8 浏览器

取消绑定

removeEventListener(事件类型,处理函数)

只能取消addEventListener绑定的事件处理函数

 var f1 = function(){console.log('click1');}
  var f2 = function(){console.log('click2');}
  div.addEventListener('click',f1)
  div.addEventListener('click',function(){
    console.log('click2');
  })

 
  // 取消事件的处理函数f1

  div.removeEventListener('click',f1)

detachEvent(on+事件类型,函数)

只能取消attachEvent绑定的事件处理函数

  var f1 = function(){console.log('click1');}
  var f2 = function(){console.log('click2');}
  div.addEventListener('click',f1)
  div.addEventListener('click',function(){
    console.log('click2');
  })

  // 取消事件的处理函数f1
  div.detachEvent('click',f1)

事件的传播

当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件

冒泡

就是从事件目标的事件处理函数开始，依次向外，直到 window 的事件处理函数触发

捕获

就是从 window 的事件处理函数开始，依次向内，只要事件目标的事件处理函数执行

目标

target
点击选中的元素,此时这个元素就是目标;

冒泡和捕获的区别

就是在事件的传播中，多个同类型事件处理函数的执行顺序不同

事件委托

因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件;
我们可以把子元素的事件写在父级上面;

事件触发

点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件

阻止冒泡

e.stopPropagation() // 在主流浏览器使用

e.cancleBubble = true // 在低版本的ie浏览器使用

  out.addEventListener('click',function(){
    console.log('out');
  })
  center.addEventListener('click',function(){
    console.log('center');
  })
  inner.addEventListener('click',function(e){
    e = e || window.event;
    console.log('inner');
  //   // 阻止事件冒泡
    e.stopPropagation()
  })

target(兼容)

target 这个属性是事件对象里面的属性，表示你点击的目标
当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

这个 target 也不兼容，在 IE 下要使用 srcElement

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click', function (e) {
      e = e || window.event
      var target = e.target || e.srcElement
      console.log(target)
    })
  </script>//点击ul target就是ul
           //点击li target就是li
</body>

事件委托

默认行为

鼠标右键自动弹出菜单
a标签点击跳转
类似这种不需要我们绑定注册的事件发生就是默认行为;

阻止默认行为

e.preventDefault(); 适用与高版本浏览器;
e.returnValue = false ; 适用于低版本的ie浏览器;
- 兼容写法
```
try{
e.preventDefault();
}catch(error){
e.returnValue = false;
}
```
return false ; 适用于0级事件中(on+事件类型)

有一点菜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
event操作绑定

event操作绑定操作双标签的内容innerText/innerHTMLconsole.log(document.querySelector('#dv').innerText);document.querySelector('#dv').innerText = '66';操作单标签的内容自有属性直接用元素语法:元素.属性名 console.log(document.querySelector("img").src); //查看src的路径document.query
复制链接

扫一扫