JS中的事件

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

1.事件的步骤

- 事件源：触发事件的元素（获取事件源）

- 事件类型： 例如 click 点击事件（绑定事件）

- 事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数

var btn = document.getElementById('btn');

btn.onclick = function() {

     alert('鼠标单击事件');//鼠标点击事件

}

2.常见的鼠标事件

onclick          鼠标点击左键触发

onmouseover    鼠标经过触发

onfocus         获得鼠标焦点触发

onblur          失去鼠标焦点触发

onmousemove   鼠标移动触发

onmouseup     鼠标弹起触发

onmousedown   鼠标按下触发

3.操作元素

JavaScript的 DOM 操作可以改变网页内容、结构和样式。（注意：这些操作都是通过元素对象的属性实现的）。

3.1 操作元素内容

element.innerText   从起始位置到终止位置的内容，去除了html标签，空格换行也会去掉。

element.innerHtml  起始位置到终止位置的全部内容，包括了HTML标签，同时保留了空格与换行符。

<input type="button" name="onname"  value="白日依山尽"/><br/><br/><br/>

<div>下一句</div>

<script>

 var btn = document.querySelector('input');

 var ele_div = document.querySelector('div');

 btn.onclick = function(){

 // ele_div.innerText = "日久见人心";

 ele_div.innerHTML = "<span style='color:red;'>日久见人心</span>";  }

</script>

3.2 常见的元素属性

innerText、innerHtml 、src、href、id、alt、title            改变元素内容

<a href="http://www.baidu.com/">百度</a>

<input type="button" name="" value="改变链接地址" />

  <script>

    var btn  = document.querySelector('input');

var objA = document.querySelector('a');

btn.onclick = function(){

        objA.innerText = "QQ官网";

objA.href="http://www.qq.com/";

objA.title="点击去qq网站";

}   

</script>

3.3 表单元素的属性操作

表单属性：type、value、checked、selected、disabled

btn.value = "被点击啦";

btn.disabled  =  true;//按钮禁用

btn.type  =  "text";//改变input框的类型

3.4 样式属性操作

element.style           行业样式操作

element.className      类名样式操作

<div>盒子</div>

<script>   

var divObj = document.querySelector("div");

divObj.onclick = function(){

this.style.background = "red";

this.style.width = "200px";

}  

</script>



//class是保留关键词，所有用className来更改类名

this.className = "box";

this.className = "box box1";