JavaScript事件大全,及模拟应用场景(后续补充)

<!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 = "";
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值