夏天的云朵 发表于 2023-11-18 09:58:46

JavaScript事件

一、  JavaScript事件
在前端中,页面的每次交互和特效都是一个事件,其中任何一个html元素都是一个事件源,一个很事件源可以添加多个事件。
二、 事件中的event对象  
只要发生一个事件就会产生一个event事件,event代表事件的状态
1、event事件常见的属性和状态

2、阻止默认事件的发生
对于一些标签来说,他们拥有自己的事件,比如:a标签可以跳转,submit/button可以提交表单,reset可以重置按钮,那么如果想要给这些按钮添加事件,并且不让他执行对应的默认事件的话,就需要使用自制时间发生; 阻止默认事件的方法有两种:使用的是事件对象的方法来阻止event.stopPropagation();或者 return fales;
3、事件流-冒泡机制
事件的流向,是由两个机制,一个是事件的捕获 元素由外向内,另一个是元素的冒泡由内向外

注意:如果存在浏览器的兼容性问题可能会导致不同浏览器 出现冒泡程度不同
4、阻止冒泡的方法
 event.stopPropagation()
兼容性写法:
if(event && event.stopPropagation){// w3c标准
event.stopPropagation();
}else{// IE系列 IE 678
event.cancelBubble = true;
}“DOM事件流”:三个阶段:事件捕获,成为目标阶段,事件冒泡
三、 js触发事件的方式有哪些
1、在js获取元素/标签      元素.事件名称 = 匿名函数 / function(){}
2、元素.事件名称 = 函数名称
3、 在html中触发    onclick = "代码段 / 函数调用"
四、鼠标事件

五、键盘事件

想要区分键盘上的每个按键,是通过键盘的keyCode值来判断的,所以想要知道按下的是哪个按键,可以使用event.keyCode
document.onkeyup = function(){
    console.log(event.keyCode);
}案例:控制小人移动
</head>

<body>
   
      <img src="https://www.cnblogs.com/./img/ren_q_1.gif" alt="">
      
    var box = document.querySelector('.box')
      var img = document.querySelector('.box img');
      var flag = true;
      var left = 0;
      var tops = 0;
      var timer = null;

      function dong(walk) {
            flag = !flag;
            var imgname = flag ? `ren_${walk}_1.gif` : `ren_${walk}_2.gif`
            img.src = './img/' + imgname;
      }
      timer=setInterval(function () {
            dong('q');
      }, 200);
      clearInterval(timer)
      document.onkeydown = function () {
            switch (event.keyCode) {
                case 65:
                  left -= 10;
                  dong('l')
                  break;
                case 87:
                  tops -= 10;
                  dong('h')
                  break;
                case 68:
                  left += 10;
                  dong('r')
                  break;
                case 83:
                  tops += 10;
                  dong('q')
                  break;
            }
            box.style.left = `${left}px`;
            box.style.top = `${tops}px`;
      }六、光标事件

案例: 小米官网搜索框
*{
            margin: 0;
            padding: 0;
                }
         input{
            width: 300px;
            height: 50px;
            outline: 0;
            border: 1px solid rgb(118, 118, 118);
            margin-left:100px ;
      }
      ul{
            width: 300px;
            height: 0px;
            border: 0px solid #ff6700;
            margin-left: 100px;
            overflow: hidden;
            
      }
      li{
            list-style: none;
            line-height: 50px;
            margin-left: 20px;
            color: #666;
      }
    </style>
</head>
<body>
    <input type="text" name="" id="inp">
    <ul id="ul">
      <li>小米家电</li>
      <li>小米手机</li>
      <li>红米手机</li>
      <li>小米电脑</li>
      <li>小米平板</li>
      <li>小米手表</li>
    </ul>
</body> var height = 0;
    var timer = null;
    inp.onfocus= function(){
      inp.style.border = '1px solid #ff6700';
      timer = setInterval(function(){
            if(height >=300){
                clearInterval(timer)
            }else{
                height+=10
            ul.style.height = height+'px';
            ul.style.border = '1px solid #ff6700';
            }
            
      },20)
      

    }
    inp.onblur = function(){
      inp.style.border = '1px solid rgb(118, 118, 118)';
      ul.style.display = 'none'

    } 七、窗口事件

八、表单事件

案例: 苏宁登录页面
当输入input框内时会出现×,点击取消内容,密码框出现小眼睛,点击睁开会实现密码框显示
</head>
<body>
    <input type="text" name="" id="inp1" placeholder="请输入手机号/用户名/邮箱">X<br>
    <input type="password" name="" id="inp2" placeholder="请输入密码"><imgsrc="https://www.cnblogs.com/./xiaomi.img/yanjing_yincang_o.png" alt="">X 九、单选框和复选框被选中

案例:简易购物车案例

<table border='1' width="500">
      <tr>
            <td>选择</td>
            <td>商品名称</td>
            <td>商品数量</td>
            <td>商品价格</td>
            <td>总价</td>
      </tr>
      <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>上衣</td>
            <td>
                <button>-</button>
                5
                <button >+</button>
            </td>
            <td >100</td>
            <td ></td>
      </tr>
      <tr>
            <td><input type="checkbox" /></td>
            <td>裤子</td>
            <td>
                <button>-</button>
                2
                <button >+</button>
            </td>
            <td >200</td>
            <td ></td>
      </tr>
      <tr>
            <td><input type="checkbox" /></td>
            <td>包包</td>
            <td>
                <button >-</button>
                1
                <button >+</button>
            </td>
            <td >300</td>
            <td ></td>
      </tr>
      <tr>
            <td>全选:<input type="checkbox" id="checkAll"/></td>
            <td colspan="4" id='totlePrice'>总价:0</td>
      </tr>
    </table> // 1. 获取所有的复选框    var sel = document.querySelectorAll('.sel');    var prices = document.querySelectorAll('.price');    var onePrices = document.querySelectorAll('.prices');    var nums = document.querySelectorAll('.num');    var adds = document.querySelectorAll('.add');    var jians = document.querySelectorAll('.jian');    // 2. 给复选他添加事件    for(var i=0;i
页: [1]
查看完整版本: JavaScript事件