var viewModelDemo3 = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
alert("您按了shift键");
} else {
alert("您没有按shift键");
}
},
myFunction2: function(data, event,para1,para2) {
alert('data=' + data);
alert('event=' + event);
alert('para1='+para1);
alert('para2='+para2);
}
};
ko.applyBindings(viewModelDemo3,document.getElementById("Demo3"));
<h1>演示 KnockOut click绑定 功能</h1>
<hr />
<ul>
<li class="Point">
3、<b class="PointTitle">click绑定获取<span class="KeyWord">Dom事件对象,以及传递多个参数</span></b><br />
<ul class="PointDesc">
<li>click绑定处理函数的时候,会自动传入当前Dom的event对象作为第二参数</li>
</ul>
<div class="PointDemo" id="Demo3">
<button data-bind="click: myFunction">
点击我获取DOM的Event对象
</button>
<button data-bind="click: function(data,evt){ myFunction2(data,evt,'我的参数1','我的参数2')}">
点击我传递更多参数
</button>
</div>
<div class="PSFrame">
一般情况下,获取用户点击的数据就、和事件对象就已经满足大部分需求了<br>
虽然可以在外层包装一个函数来添加自己的其他参数,但是不建议这么设计程序<br>
viewModel里应该包含了当前视图的状态等信息,所以最好从model里获取需要的信息
</div>
<hr />
</li>
</ul>
/*Demo�ļ���ʽ*/
body
{
background-color: #e3e5d4;
}
/* ֪ʶ�� */
.Point
{
margin: 20px,0,0,0;
}
/* ֪ʶ����� */
.PointTitle
{
color:#0d8d0d;
}
/* �ؼ��� */
.KeyWord
{
color:Red;
}
/* ֪ʶ������ */
.PointDesc
{
font-family: Arial;
font-size: 15px;
color:#09acb8;
}
.PointDesc li
{
margin: 10px,0,0,0;
}
/* ֪ʶ��Demo��� */
.PointDemo
{
border-style:double;
border-color:#dcd559;
min-height:100px;
font-family: Corbel;
font-size: 20px;
color: #00174f;
}
/* ��Ҫ������ʾ����Ϣ��� */
.PSFrame
{
border-style: dashed;
border-color:#78e6ef;
font-family: Corbel;
font-size: 20px;
font-style:italic;
color: #b86c00;
}
/* ������ʾ */
.error {
color:Red;
}
/* ********************************************************** */
/*��Ҫǿ������ʽ*/
.Notice
{
font-weight: bold;
font-family:Bodoni MT Black;
color: #cd0707;
}
/* ********************************************************** */
/*�������ʽ*/
input[type="text"]
{
min-width:250px;
}
select
{
min-width:400px;
}
External resources loaded into this fiddle: