189 8069 5689
1、 标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。
成都创新互联公司是专业的岐山网站建设公司，岐山接单;提供网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行岐山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
2、javascript: 是一个伪协议，其他的伪协议还有 mail: tel: file: 等等。
a id="jsPswEdit" class="set-item" href="javascript:;"修改密码/a1
javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。
3、一般在这种情况下，会给绑定一个事件回调，来执行业务，如：
document.getElementById('jsPswEdit').addEventListener('click', function(e) {
e.preventDefault(); // 当a触发click时，处理业务}, false);1234
4、简单来说，”javascript:”是另外一种嵌套js代码在网页中的方法。 跟通过标签嵌套js代码差不多。 如点击下面链接会会执行”javascript:”后面的内容。
a href = "javascript:alert(22);"点我/a1
扩展资料
例子：a href="javascript:;"我的大学/a
javascript: 是一个伪协议
javascript:是表示在触发a默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击a时就没有任何反应。
href="javascript:;"就是去掉a标签的默认行为，跟href="javascript:void(0)"是一样的
void 是JavaScript 的一个运算符，void(0)就是什么都不做的意思。
参考资料
百度百科-a（HTML语言标签）
[img]表示空格。是javascript里面的转义字符！
例如:
p abc/p这时候浏览器会忽略掉abc前面得空格
为了在前面有空格，通常使用pnbsp;nbsp;abc/p
拓展资料
JavaScript[3]是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。
JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。
参考资料：百度百科—javascript
html
head
title/title
script language="javascript"
function f(){document.getElementById("test").innerHTML=" amp" ;}
/script
/head
body
input type="button" value="test" onclick="f()" /
11span id="test" /span22
/body
/html
------------
就是用这个 amp; 符号代替。把中间的空格去掉就ok了
事件处理程序的方式了：
1. 设置HTML标签属性为事件处理程序
文档元素的事件处理程序属性，其名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。当然了，这种形式只能为DOM元素注册事件处理程序。实例：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
/style
/head
body
div id="div1" onClick="console.log('div1');"div1
div id="div2" oNClick="console.log('div2');"div2
div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');"div3
/div
/div
/div
script type="text/javascript"
/script
/body
/html
结果（鼠标点击div3区域后）：
从结果中可以看出：
①因为HTML里面不区分大小写，所以这里事件处理程序属性名大写、小写、大小混写均可，属性值就是相应事件处理程序的JavaScript代码；
②若给同一元素写多个onclick事件处理属性，浏览器只执行第一个onclick里面的代码，后面的会被忽略；
③这种形式是在事件冒泡过程中注册事件处理程序的；
2.设置JavaScript对象属性为事件处理程序
可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。实例：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
/style
/head
body
div id="div1"div1
div id="div2"div2
div id="div3"div3
/div
/div
/div
script type="text/javascript"
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
div1.onclick = function(){
console.log('div1');
};
div2.onclick = function(){
console.log('div2');
};
div3.onclick = function(){
console.log('div3');
};
div1.onclick = function(){
console.log('div11111');
};
div1.onClick = function(){
console.log('DIV11111');
};
/script
/body
/html
结果（鼠标点击div3区域后）：
从结果中可以看出：
①因为JavaScript是严格区分大小写的，所以，这种形式下属性名只能按规定小写；
②若给同一元素对象写多个onclick事件处理属性，后面写的会覆盖前面的（ps：这就是在修改一个对象属性的值，属性的值是唯一确定的）；
③这种形式也是在事件冒泡过程中注册事件处理程序的；
3.addEventListener()
前两种方式出现在Web初期，众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数：第一个参数是要注册处理程序的事件类型，其值是字符串，但并不包括前缀“on”；第二个参数是指当指定类型的事件发生时应该调用的函数；第三个参数是布尔值，其可以忽略（某些旧的浏览器上不能忽略这个参数），默认值为false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时，就是在事件捕获过程中注册事件处理程序。实例：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
/style
/head
body
div id="div1"div1
div id="div2"div2
div id="div3"div3
/div
/div
/div
script type="text/javascript"
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);
div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);
div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);
div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);
div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);
div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);
div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);
/script
/body
/html
结果（鼠标点击div3区域后）：
从结果中可以看出：
①addEventListener()第三个参数的作用正如上面所说；
②通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；
相对addEventListener()的是removeEventListener()方法，它同样有三个参数，前两个参数自然跟addEventListener()的意义一样，而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可，同样可以省略，默认值为false。它表示从对象中删除某个事件处理函数。实例：
div1.addEventListener('click', div1BubbleFun, false);
div1.removeEventListener('click', div1BubbleFun, false);
function div1BubbleFun(){
console.log('div1-bubble');
}
4.attachEvent()
但是，IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的，IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获，所以attachEvent()并不能注册捕获过程中的事件处理函数，因此attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。而且，它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例：
var div1 = document.getElementById('div1');
div1.attachEvent('onclick', div1BubbleFun);
function div1BubbleFun(){
console.log('div1-bubble');
}
相应的，从对象上删除事件处理程序函数使用detachEvent()。例如：
div1.detachEvent('onclick', div1BubbleFun);
到此为止，我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧！
二.事件处理程序的调用
1.事件处理程序的参数：正如前面所说，通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。实例（给页面上id为div1的元素添加点击事件，当点击该元素时在控制台输出事件类型和被点击元素本身）：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1"div1/div
script type="text/javascript"
var div1 = document.getElementById('div1');
if(div1.addEventListener){
div1.addEventListener('click', div1Fun, false);
}else if(div1.attachEvent){
div1.attachEvent('onclick', div1Fun);
}
function div1Fun(event){
event = event || window.event;
var target = event.target || event.srcElement;
console.log(event.type);
console.log(target);
}
/script
/body
/html
2.事件处理程序的运行环境：关于事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题，可以看下面四个实例。
实例一：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1" onclick="console.log('html:'); console.log(this);"div1/div
script type="text/javascript"
/script
/body
/html
结果一：
从结果可以看出：
①第一种方法事件处理程序中this指向这个元素本身；
实例二：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1" onclick="console.log('html:'); console.log(this);"div1/div
script type="text/javascript"
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
/script
/body
/html
结果二：
从结果可以看出：
①第二种方法事件处理程序中this也指向这个元素本身；
②存在第二种方法时，它会覆盖第一种方法注册的事件处理程序；
实例三：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1" onclick="console.log('html:'); console.log(this);"div1/div
script type="text/javascript"
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
div1.addEventListener('click', function(){
console.log('div1.addEventListener:');
console.log(this);
}, false);
/script
/body
/html
结果三：
从结果可以看出：
①第三种方法事件处理程序中this也指向这个元素本身；
②第三种方法并不会覆盖第一种或第二种方法注册的事件处理程序；
实例四：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1" onclick="console.log('html:'); console.log(this);"div1/div
script type="text/javascript"
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
div1.attachEvent('onclick', function(){
console.log('div1.attachEvent:');
console.log(this === window);
});
/script
/body
/html
结果四：
从结果可以看出：
①第四种方法事件处理程序中this指向全局对象Window；
②第四种方法也不会覆盖第一种或第二种方法注册的事件处理程序；
3.事件处理程序的调用顺序：多个事件处理程序调用规则如下：
①通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用；
②使用addEventListener()注册的处理程序按照它们的注册顺序依次调用；
③使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；