【JS】day11 鼠标/键盘事件/事件流

day11

1. 事件对象

(1)事件:对某个元素的某种操作

(2)事件对象:当某个事件触发时产生的对象,就是事件对象。

注意:event使用前提,必须有事件;也就是说没有事件,就没有事件对象;

​ 不同的对象产生的事件不同。

  事件对象的兼容: var e = evt || event;

事件的三要素:

  • 元素(div)
  • 事件类型 (onclick)
  • [事件对象] (event)

<script type="text/javascript">

document.onclick = function(evt){

// 事件对象event 兼容写法

var e = evt || event;

console.log(e);

}

</script>

案例:小老虎跳一跳

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

#box{

width: 100px;

height: 100px;

border: 1px solid black;

/* 要使元素移动,需要添加定位 */

position: absolute;

top: 500px;

left:200px;

background-image: url(img/3.jpg);

background-size: 100px 100px;

}

/* img{

width: 100px;

height: 100px;

} */

</style>

</head>

<body>

<div id="box">

<!-- ![](img/3.jpg) -->

</div>

</body>

</html>

<script type="text/javascript">

// 要求: 点击大白板,使图片向上移动200px,腾空2s,返回到原来位置

var oDiv = document.querySelector('#box');

document.onclick = function(){

// 注意:写使用oDiv.style.top 数值+单位 字符串

// 读使用oDiv.offsetTop 数值,无单位

oDiv.style.top = oDiv.offsetTop - 200 + 'px';

// 延时定时器

setTimeout(function(){

oDiv.style.top = 500 +'px';

},2000);

}

</script>

2. 鼠标事件对象的属性

坐标属性:

  • pageX/ pageY 鼠标相对于整个文档左侧和顶部的坐标。 常用

  • clientX / clientY 鼠标相对于局部窗口的左侧和顶部的坐标。
  • offsetX /offsetY 鼠标相对于内部元素的距离左侧和顶部的坐标。

    • 鼠标距离最近的父元素左顶点的坐标
    • 常用于拖拽

案例:图片跟随鼠标移动

3. 键盘事件

  • 键盘事件对象都是通过document来触发的
  • 键盘事件:

    • (1)keyUp: 用户释放某一个按键时发生

          document.onkeydown = function(){

      console.log('haha');

      }

    • (2)keyDown: 用户按下按键时发生

          document.onkeyup = function(){

      console.log('xixi');

      }

    • (3)keyPress: 用户按下按键,并且产生一个字符时发生(意思就是说按ctrl这样的按键没有效果的)

          document.onkeypress = function(){

      console.log('xixihaha');

      }

  • 键盘对象

    • (1)keyCode:键盘录入时字母所对应ASCII码

      • A:65
        a:97

        0:48

        回车:13

        ctrl+回车:10

    • (2) ctrlKey 返回当事件被触发时,"Ctrl" 是否被按下,返回值为true or false

    //键盘检测兼容写方法

    var key = e.keyCode || e.which || e.charCode;

<script type="text/javascript">

document.onkeypress = function(evt){

var e = evt || event;

var key = e.keyCode || e.charCode || e.which;

console.log(key);

console.log(e.ctrlKey);

if(e.keyCode==10 && e.ctrlKey){

console.log('发送');

}

}

</script>

4. 事件流

(1)概念:

  • 当某个事件执行时,从子元素向父元素触发 或 从父元素向子元素触发 称为事件流

(2)事件流的两种模式:

事件冒泡

  • 从子元素向父元素触发 --->当某个事件触发时,同样的事件会向父元素触发。
  • 注意:但并不是所有事件都会产生冒泡问题 onfocus onblur onload不会产生冒泡问题。

【JS】day11 鼠标/键盘事件/事件流

事件的冒泡:

文档结构: window document.body body元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

#father{

width: 200px;

height: 200px;

border: 1px solid red;

}

#son{

width: 100px;

height: 100px;

border: 1px solid red;

}

</style>

</head>

<body>

<div id="father">

<div id="son">

</div>

</div>

</body>

</html>

<script type="text/javascript">

var oF = document.getElementById('father');

var oS = document.getElementById('son');

oS.onclick = function(){

console.log('oS');

}

oF.onclick = function(){

console.log('oF');

}

document.body.onclick= function(){

console.log('o-body');

}

document.onclick = function(){

console.log('o-document');

}

window.onclick = function(){

console.log('o-window');

}

</script>

阻止事件冒泡

//兼容写法

e.stopPropagation?e.stopPropagation():e.cancelBubble='true';

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

ul{

display: none;

}

</style>

</head>

<body>

<button type="button">显示</button>

<ul>

<li>抓鸭子</li>

<li>抓几只</li>

<li>抓1万只</li>

<li>抓到了</li>

<li>嘎嘎嘎嘎嘎</li>

</ul>

</body>

</html>

<script type="text/javascript">

var oUl = document.querySelector('ul');

var oBtn = document.querySelector('button');

oBtn.onclick = function(evt){

var e = evt || event;

oUl.style.display = 'block';

//测试该方法是否存在,若不存在,返回undefined

console.log(e.stopPropagation);

console.log('点击按钮');

// 三目运算:

// 根据表达式1的真假,来决定是执行表达式2还是表达式2

// 如果表达式1为真,则执行表达式2,最终返回表达式2的结果

// 如果表达式2为假,则执行表达式3,最终返回表达式3的结果

// 阻止冒泡事件 兼容写法

e.stopPropagation?e.stopPropagation():e.cancelBubble='true';

}

document.onclick = function(){

oUl.style.display= 'none';

console.log('点击大白板');

}

</script>

阻止事件的默认行为

//兼容写法

e.preventDefault?e.preventDefault():e.returnValue = false;

//或者简化的兼容写法

return false;

  • 阻止鼠标右键

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>鼠标右键事件</title>

<style type="text/css">

#box{

height: 100px;

width: 100px;

background-color: hotpink;

position: absolute;

}

</style>

</head>

<body>

<div id="box">

</div>

</body>

</html>

<script type="text/javascript">

var oBox = document.querySelector('#box');

document.oncontextmenu = function(evt){

// console.log('haha');

var e = evt||event;

oBox.style.left = e.pageX + 'px';

oBox.style.top = e.pageY + 'px';

// 阻止浏览器默认行为

// e.preventDefault();//非ie

// 兼容写法

// e.preventDefault?e.preventDefault():e.returnValue=false;

// 简化写法

return false;

}

</script>

  • 阻止超链接

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title></title>

    </head>

    <body>

    <a href="http://www.baidu.com">跳转</a>

    </body>

    </html>

    <script type="text/javascript">

    var oA = document.querySelector('a');

    oA.onclick = function(evt){

    var e = evt||event;

    e.preventDefault?e.preventDefault():e.returnValue=false;

    // return false;

    }

    </script>

事件捕获

  • 从父元素向子元素触发

以上是 【JS】day11 鼠标/键盘事件/事件流 的全部内容, 来源链接: utcz.com/a/96815.html

回到顶部