DOM event

1. Events in DOM can be divided into two categories

1. Browser behavior
such as: document loading is complete, picture loading is complete
2. User behavior
such as: input data in the input box, click the button

(2). Common DOM events

onload        浏览器已完成页面的加载
支持事件的对象    window image
onchange    HTML 元素改变
onclick        用户点击 HTML 元素
onmousemove    用户移动鼠标
onmouseover    鼠标移动到元素上
onmouseout    鼠标移开某元素上
onmousedown    鼠标按下
onmouseup    鼠标松开
onkeydown    用户按下键盘按键
onkeyup        按下键盘松开
onblur        失去焦点
onfocus        获取焦点

(3). Two ways of DOM event binding

1. Bind directly in the event attribute of the element

like:

<button type="button" onclick="alert('haha')">点击看看</button>

2. Through the event attribute assignment of the element object (implemented by anonymous function)
such as:

<button id="btn" type="button">点击看看</button>
 var oBtn=document.getElmentById("btn");
 oBtn.onclick=function(){
    
    
     alert('haha');
 }

JS style effects

1. Use js to get or set css style (only get or set inline style)

grammar:

node.style.属性名=属性值
注意：当属性名为蛇形命名时，要转换成小驼峰命名

node.style.color="red"
node.style.fontSize="30px"

2. Use js to get or set the css class name

grammar:

node.className=类名
node.className="a1";
node.className="a1 b1";
获取元素的位置:
event.offsetX；
event.offsetY；
event.clientX；
event.clienY；

3. Realize the events required by the advertisement map

Event: event triggered when the web page is scrolled

onscroll
获取网页滚动上边距的距离

document.body.scrollTop
或者

docuemnt.documentElement.scrollTop

4. Datetime object

Date date object is used to deal with date and time

1. [Create] Date object:

var myDate=new Date();

创建空的Date对象时表示的值是当前的日期和时间

var myDate=new Date(dateString)
var myDate=new Date(year, month, day, hours, minutes, seconds, milliseconds)；
日期字符串dateString：
规则：
1、日期字符串是可选的。
2、日期在前，时间在后。
3、日期常用（空格，横线-，逗号,）分隔，时间以（冒号:）分隔

2. Properties and methods of Date object

Get the current time:

var d=new Date();
//获取年：
var year=d.getFullYear();
//获取月：
var month=d.getMonth();
//获取日：
var date=d.getDate();
//获取时分秒：
var hours=d.getHours();
var minutes=d.getMinutes();
var seconds=d.getSeconds();
//获取星期：
var day=d.getDay();

Form objects and form operations

1. The properties of the table object

The border of the table object: tableobject.border
The width of the table object: table object.width

2. Row operation of table object (row)

表格对象的所有行： 表格对象.rows;
表格对象的行数：  表格对象.rows.length
表格对象的第一行： 表格对象.rows[0]
表格对象的最后一行：表格对象.rows[表格对象.rows.length-1]
行对象获取行下标: 行对象.rowIndex
删除行：删除指定下标行        表格对象.deleteRow(行的下标)
插入行：在指定下标行前插入行    表格对象.insertRow(行的下标)
返回值：返回行对象

3. Column operation of table object (cell)

行对象的所有列：    行对象.cells;
行对象的第一列：    行对象.cells[0]
行对象的最后一列：    行对象.cells[行对象.cells.length-1]
列对象获取列下标:  列对象.cellIndex
删除列：删除指定下标列        行对象.deleteCell(列的下标);
插入列：在指定下标列前面插入列    行对象.insertCell(列的下标);

event:

Click event: onclick
Lost focus event: onblur
Get the focus event: onfocus

2. Form operation
1. The method of obtaining form elements

The first method is obtained by the name of the element
The second method: get by the index of the element
The third method: get by the id of the element
For example:

<form name="fr1" id="fm" action="demo.html">
   账号:<input type="text" id="tx1" />
   密码:<input type="password" id="pwd1" />
   确认密码<input type="password" id="pwd2" />
   <input type="submit" value="登录" />
</form>
<script type="text/javascript">
   //1.通过下标获取form元素
     var fr1 = document.forms[0];
   console.log(fr1);
   //2.通过name属性获取form元素
     var fr2 = document.forms["fr1"];
   console.log(fr2);
   //3.通过name属性获取form元素
     var fr3 = document.fr1;
   console.log(fr3);
   //4.通过id属性获取form元素
     var fm2 = document.forms["fm"];
   console.log(fm2);
</script>

2. Form validation
return false: In most cases, returning false for the event handler function can prevent the default event behavior.
Case 1:

document.forms[0].onsubmit=function(){
    
    
    var zh=document.forms[0].tx1.value;
    if(zh==""){
    
    
    alert("账号不能为空!!");
    return false;
    }
}

Case two:

<a href="demo.html">点击跳转</a>
var a1=document.getElementsByTagName("a")[0];
    a1.onclick=function(){
    
    
    return false;
}

BOM events in JS, JS style effects, table objects and form operations