教程 前端-从零开始系列-15:DOM 事件

zoeDylan · 2017年11月01日 · 204 次阅读

前端-从零开始系列-15:DOM事件

DOM事件就是页面操作在JS中的一些列事件响应,比如:文档处理、鼠标、键盘等事件

全局事件

事件添加

在网页开发中,添加事件有三种方式:

  1. HTML属性
<button onclick="alert('我被点击了')">点我</button>
  1. 元素on事件
<p>点我</p>
<script>
 document.querySelector('p').onclick = function(event) {
            alert('我被点击了');
        }
</script>
  1. addEventListener方法
<p>点我</p>
<script>
    function pClick(){
        alert('我又被点击了');
    }
   document.querySelector('p').addEventListener('click',pClick); 
</script>

事件解绑

不同的添加事件方式有不同的事件解绑方式、

  1. HTML属性,我们只需要移除事件属性就可以了
<button onclick="alert('我被点击了')">点我</button>
<script>
document.querySelector('button').removeAttribute('onclick');
</script>
  1. 元素on事件,我们重新给事件赋值空方法就可以了
<p>点我</p>
<script>
 document.querySelector('p').onclick = function(event) {
            alert('我被点击了');
        }

document.querySelector('p').onclick = function(){};
</script>
  1. addEventListener方法,使用removeEventListener
<p>点我</p>
<script>
    function pClick(){
        alert('我又被点击了');
    }
   document.querySelector('p').addEventListener('click',pClick); 
   document.querySelector('p').removeEventListener('click',pClick); 
</script>

事件应用

  1. 简单绑定

      <p></p>
    <textarea></textarea>
    <script>
        var
            p = document.querySelector('p'),
            txt = document.querySelector('textarea');
    
            txt.addEventListener('keyup',function(){
                p.innerHTML = txt.value;
            }); 
    </script>
    

事件部分就写这些,更多深入的东西后面慢慢就了解了,不需要前期一口吃个大胖子,只需要知道有写什么事件可以用就好。

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册