JavaScript之事件

<style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      background: green;
      height: 200px;
    }
  </style>

  <div></div>

var div = document.getElementsByTagName('div')[0];
    div.onclick = function () {

    }

    div.addEventListener('click', func() {

    }, false) // IE9以下不兼容
    
	
	div.attachEvent('onclick', function () {}); //IE独有

 
封装兼容性的addEvent(elem, type, handle);方法

function addEvent(elem, type, handle) {
      if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
      } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
          handle.call(elem);
        })
      } else {
        elem['on' + type] = handle;
      }
    }

 
移除事件：

div.removeEventListener('click', test, false);

 
阻止冒泡

<style>
    .wrapper {
      width: 300px;
      height: 300px;
      background: red;
    }

    .content {
      width: 200px;
      height: 200px;
      background: green;
    }

    .box {
      width: 100px;
      height: 100px;
      background: yellow;
    }
  </style>
  <div class="wrapper">
    <div class="content">
      <div class="box"></div>
    </div>
  </div>

  <script>
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    var box = document.getElementsByClassName('box')[0];
    wrapper.addEventListener('click', function (e) {
      stopBubble(e);
      console.log('wrapper')
    }, false);
    content.addEventListener('click', function (e) {
      stopBubble(e);
      console.log('content')
    }, false);
    box.addEventListener('click', function (e) {
      stopBubble(e);
      console.log('box')
    }, false);

    // false 改成true 是事件捕获 ，顺序与冒泡相反 （IE没有有事件捕获）;
    // 先捕获 后冒泡
    // focus, blur, change, submit, reset, select 等事件不冒泡;

    // e.stopPropagation();

    // e.cancelBubble = true;


    // div.onclick = function () {
    //   stopBubble(e);
    // }

    function stopBubble(event) {
      if (event.stopPropagation) {
        event.stopPropagation();
      } else {
        event.cancelBubble = true;
      }
    }

 
阻止右键点击出菜单

//阻止右键点击出菜单
	//1
    document.oncontextmenu = function () {
      console.log('a');
      return false;
    }

	//2 W3C标注，IE9以下不兼容
	document.oncontextmenu = function (e) {
      console.log('a');
      event.preventDefault();
    }

	//3. 兼容IE
	document.oncontextmenu = function (e) {
      console.log('a');
      event.returnValue = false;
    }

	//封装
	document.oncontextmenu = function (e) {
      console.log('a');
      cancelHandler(e);
    }

    function cancelHandler(event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    }

 

 

 

持续更新中ing…