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

  
  
  
  
  



  

    

      
请点击
    
    

      
mouserMove
      
mouseDown
      
    
    

      
mouseOver
      
mouseOut
    
    

      
mouseEnter
      
mouseLeave
    
    

        
请双击
    
    

      
        --请选择--
        中国
        美国
      
      
        --请选择--
      
    
    

      

      

      
      


      
    
  
  

/**
 * 事件
 */

//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 = `湖北
    深圳`;
  } else if (country === 'America') {
    provinces = `纽约
    洛杉矶`;
  } else {
    provinces = `--请选择--`;
  }
  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 += `
${dataVal}
`;
    });
  }
  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 = "";
}