Javascrip/ECMAScript_综合

文章目录

- Js中的事件总结
- - 注册事件的方式
  - 代码的执行顺序
  - Js代码节点的设置
  - 捕捉回车键
  - Js void运算符
  - 循环

Js中的事件总结

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on
onxxx这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）
Js中的事件：
（1）blur失去焦点
（2）focus 获得焦点（3）click鼠标单击
（4）dbclick 鼠标双击（5）change 下拉列表选中项改变，或文本框内容改变（6）keydown 键盘按下
（7）keyup 键盘谈起（8）load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）(9) mousedown 鼠标按下
(10) mouseover 鼠标经过
(11) mousemove 鼠标移动
(12) mouseout 鼠标离开
(13) mouseup 鼠标弹起(14) reset 表单重置
（15）select 文本被选定
（16）submit表单提交

注册事件的方式

注册事件的第一种方式，直接在标签中使用事件句柄:

<script>
//对于当前程序来说，sayHello函数被称为回调函数（callback函数）
//回调函数的特点，自己的函数，自己不调用，由其他程序负责调用function sayHello(){
    alert("你好，Js")
}
</script>
//以下代码的含义是，将sayHello函数注册到按钮上，等待click事件发生，该函数被浏览器调用，我们称之为回调函数
<input type = "button" value = "hello" onclick = "sayHello()"/>

注册事件的第二种方式，是使用纯JS代码完成事件的注册

<input type = "button" value = "hello2" id = "mybtn">
<script type = "text/javascript">function dosome(){
    alert("do some!");}
var btnObj = document.getElementById("mybtn");
btnObj.onclick = dosmoe;
</script>

第一步：先获取这个按钮的对象（document是全部小写，内置对象，可以直接使用，document就代表整个HTML页面）

var btnObj = document.getElementById("mybtn");

第二步：给按钮对象的onclick属性赋值（按钮都有onxxx属性）

//将回调函数dosome注册到click事件上
btnObj.onclick = dosmoe;//注意：千万不要加小括号，btnObj.onclick = dosmoe()是错误的写法

第三种：
将第二种dosome函数去掉，把btnObj.onclick = dosmoe;换为以下代码。相当于匿名函数。

btnObj.onclick = function(){
    alert("do some");
}

代码的执行顺序

var btnObj = document.getElementById("mybtn");

获取属性应该把这段代码放在input代码中设置属性下代码的下面，如果在上面，会出现获取不到属性。
也可以用load事件，写法：

<script type = "text/javascript">
function read(){
    
var btnObj = document.getElementById("mybtn");
btnObj.onclick =  function(){
    alert("do some");}
}
</script>
<body onload = "read()"><input type = "button" value = "hello2" id = "mybtn">
</body>

以上代码也可以写为：

<body>
<script type = "text/javascript">
window.onload = read;
function read(){
    
var btnObj = document.getElementById("mybtn");
btnObj.onclick =  function(){
    alert("do some");}
}
</script><input type = "button" value = "hello2" id = "mybtn">
</body>

script代码可以进一步简化为：

//页面加载的过程中，将a函数注册给了load事件
//页面加载完毕之后，load事件发生，此时执行回调函数a
//回调函数a执行的过程中，把b函数注册给了id="mybtn"的click事件
//当id="mybtn"的节点发生了click事件之后，b函数被调用执行
window.onload = function (){
    //回调事件a函数document.getElementById("mybtn").onclick = function (){
    alert("dosome");
}
}

Js代码节点的设置

        <script type="text/javascript">window.onload = function (){
    document.getElementById("mybtn").onclick = function (){
    var mytext = document.getElementById("mytext");//一个节点的对象中只要有的属性都可以通过"."调用mytext.type = "checkbox"}}</script></head><body><input type="button" value="hello" onclick="alert('你好张三');alert('你好李四')"/><input type="text" id="mytext" /><input type="button" value="把文本框修改为复选框" id="mybtn"/></body>

捕捉回车键

        <script type="text/javascript">window.onload = function (){
    document.getElementById("mybtn").onclick = function (){
    var mytext = document.getElementById("mytext");//一个节点的对象中只要有的属性都可以通过"."调用mytext.type = "checkbox"}var usernameElt = document.getElementById("username");//回车键的键值是13//ESC的键值是27//回调函数c注册给了id = "username"的onkeydown事件//当按下键盘之后调用了c函数被调用usernameElt.onkeydown = function (ev){
    //回调函数c//获取键值//对于键盘事件对象来说，都有keyCode属性来回去键值if (ev.keyCode==13){
    alert("按了回车键")}if (ev.shiftKey){
    alert("按了shif");}}}</script>
<input type="text" id="mytext" />
<input type="button" value="把文本框修改为复选框" id="mybtn"/>
<input type="text" id="username">

Js void运算符

<!--        void运算符的语法格式：void(表达式)-->
<!--        运算原理，执行表达式，但是不返回任何结果-->
<!--        void
--><a href="javascript:void(0)" onclick="alert('test code')">保留住点击样式，同时执行一段js代码，但是不跳转</a></body>

循环

if...else
swicth
while
do..while
for
with

<script>var t = [1,2,3,"tt"];for(var i=0;i<t.length;i+++){
    alert(t(i));
}for(var i in t){
    //i是数组的下标alert(t[i]);
}User = function(username,password){
    this.username = username;this.password = password;	
}var u = new User("张三","444");alert(u.username+","+u.password);alert(u["username"]+","+u["password"]);for(var shuXingMing in u){
    alert(u["username"]);
}with(u){
    alert(username+","+password);
}
</script>