js点击事件

首先理解事件是什么

事件是由三部分组成 事件源 事件类型 事件处理程序

        ①事件源 事件被触发的对象

        ②如何触发 什么事件 比如鼠标点击（onclick）还是鼠标进过  还是鼠标按下

        ③事件处理程序 通过一个函数赋值方式 完成

一个简单点击案例，可以更好理解如何实现

 <button id="btn">唐伯虎</button>
<script>
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            alert('点秋香');
        }
</script>

接下来介绍几个常用属性，方便我们对获取的事件源进行处理

常见鼠标事件

innerText和innerHTML可以修改元素的内容

innerText不识别html标签，去除空格和换行

innerHTML 识别标签，保留空格和换行

<div></div>
<script>
var div = document.querySelector('div');
    div.innerText = '哈哈哈哈'；
var div = document.querySelector('div');
    div.innerHTML = '<strong>哈哈哈</strong>哈哈哈显示加粗';
</script>

修改scr

<button id="ldh">ldh</button>
    <button id="zxy">zxy</button>
    <img src="imgs.jpg" alt="" title="">//title属性就是鼠标放上去显示的字
    <script>
        1.先获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        2.注册事件 出来程序
        zxy.onclick = function () {
            img.src = 'imgss.jpg';
        }
    </script>

修改表单属性

<input type = "text" value = "请输入">
var btn = document.querySelecor('button');
btn.onclick = function() {
    input.value = '被点击了';
    //禁用表单使其不能在点击用disabled禁用这个button按钮   
    //1.
    btn.disabled = ture;
    //2.
    this.disabled = true;//this相当于指定的是这个函数调用者btn
}