JavaScript事件大全，及模拟应用场景（后续补充）

最新推荐文章于 2023-12-28 16:28:26 发布

青雾山河

最新推荐文章于 2023-12-28 16:28:26 发布

阅读量542

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_40969422/article/details/94481654

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      /* font-size: 30px; */
    }

    .container>div {
      width: 300px;
      height: 300px;
      border: 1px solid #fff000;
      margin-left: 10px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    h1{
      display: none;
    }
    h2{
      text-align: center;
      width: 180px;
      border: 1px rebeccapurple solid;
    }
    #sixthDiv{
      display: flex;
      flex-direction: row;
    }
    #sixthDiv select{
      width: 100px;
    }
    #seventhDiv{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }
    #seventhDiv input{
      margin: 0;
      padding: 0;
      height: 20px;;
    }
    #seventhDiv-ul{
      list-style: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
    }
    #seventhDiv-ul li{
      background-color: #4ca6ff;
      color: #fff;
      border-radius: 5px;
      border: 1px solid #808CFF;
      margin-top: 5px;
      margin-left: 5px;
      width: 90px;
      height: 30px;;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body onload="come()" onunload="goOut()">
  <div class="container">
    <div id="firstDiv">
      <h2>请点击</h2>
    </div>
    <div id="secendDiv" onmousemove="mouseMove(this)" onmousedown="mouseDown(this)">
      <h1>mouserMove</h1>
      <h1>mouseDown</h1>
      <span></span>
    </div>
    <div id="thirdDiv" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
      <h2>mouseOver</h2>
      <h2>mouseOut</h2>
    </div>
    <div id="fourthDiv" onmouseenter="mouseEnter(this)" onmouseleave="mouseLeave(this)">
      <h2>mouseEnter</h2>
      <h2>mouseLeave</h2>
    </div>
    <div id="fifthDiv" ondblclick="dulClick(this)">
        <h2>请双击</h2>
    </div>
    <div id="sixthDiv">
      <select name="country" id="countryId">
        <option value="default" selected>--请选择--</option>
        <option value="China">中国</option>
        <option value="America">美国</option>
      </select>
      <select name="province" id="provinceId">
        <option value="default" selected>--请选择--</option>
      </select>
    </div>
    <div id="seventhDiv">
      <input type="text" onblur="console.log(this.value)" placeholder="失去焦点触发"><br>
      <input type="text" onfocus="this.style.backgroundColor = '#FF9999'" placeholder="点我就变色"><br>
      <input type="text" id="keyUp" onkeyup="keyUp(this)" placeholder="键盘弹起触发|输入树">
      <ul id="seventhDiv-ul">

      </ul>
    </div>
  </div>
  <script src="./event.js"></script>
</body>

</html>

/**
 * 事件
 */

//onload进来是触发 onunload离开时触发 在body加载之前加载
function come() {
  let isCookie = navigator.cookieEnabled ? "已启用 cookie" : "未启用 cookie";
  console.log(isCookie);
};

function goOut() {
  // 刷新时调用
  window.open('http://www.baidu.com');
};

//鼠标事件 

//单击事件
document.getElementById('firstDiv').onclick = function () {
  document.getElementById('firstDiv').innerHTML = "this is onclick";
};

//鼠标在元素内部移到时不断触发。不能通过键盘触发。
function mouseMove(me) {
  me.style.backgroundColor = `rgb(${event.offsetX},${event.offsetY},${event.offsetX})`;
  document.querySelector('#secendDiv span').innerHTML = `${event.offsetX} , ${event.offsetY}`;
};
//鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
function mouseDown(me) {
  console.log(me);
};

//鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
function mouseOver(me) {
  console.log('mouseOver:', me);
};
//鼠标移出目标元素。鼠标移出其后代元素时会触发。
function mouseOut(me) {
  console.log('mouseOut :', me);
};
//鼠标移入元素时触发,鼠标移入后代元素不会触发
function mouseEnter(me) {
  console.log('mouseEnter :', me);
};
//鼠标移出元素时触发,鼠标移出后代元素不会触发
function mouseLeave(me) {
  console.log('mouseLeave :', me);
};

//双击事件
function dulClick(me) {
  me.innerHTML = "this is ondblclick";
}

//change 事件 当自身发生改变时,触发
document.getElementById('countryId').addEventListener('change', changeAddress);
function changeAddress() {
  let provinces;
  let country = document.getElementById('countryId').value;
  if (country === 'China') {
    provinces = `<option value="hubei" selected>湖北</option>
    <option value="shenzhen">深圳</option>`;
  } else if (country === 'America') {
    provinces = `<option value="NewYork" >纽约</option>
    <option value="Los Angeles" >洛杉矶</option>`;
  } else {
    provinces = `<option value="default" selected>--请选择--</option>`;
  }
  document.getElementById('provinceId').innerHTML = provinces;
}

//模拟数据  当键盘弹起后入ul中匹配li 并输出
const obj = ['图片', '风景图片', '星星图片', '海洋图片','柳树','杨树','槐树','杨柳树','无聊的周一','星期一','星期二','星期三','星期四','星期五','星期六','星期天'];

//键盘弹起就对输入的内容模拟匹配 过滤后返回 键盘弹起一次执行一次
function objFilter(data) {
  let objData = obj.filter(function (val, index, self) {
    return val.indexOf(data) !== -1;
  });
  return objData;
};

//键盘弹起事件
function keyUp(me) {
  let val = me.value;
  let result = "";
  if (val !== "") {
    let data = objFilter(val);
    // console.log(data);
    data.forEach((dataVal) => {
      result += `<li onclick="editkeyUp(this)">${dataVal}</li>`;
    });
  }
  document.getElementById('seventhDiv-ul').innerHTML = result;
};
//每一个li 都绑定了此事件 当点击后就将自身的text输出到input框 并清空ul中的li
function editkeyUp(me) {
  let val = me.innerText;
  document.getElementById('keyUp').value = val;
  document.getElementById('seventhDiv-ul').innerHTML = "";
}